:root {
  --rr-ring-size: 96px;     /* overall ring box (w=h) */
  --rr-time-size: 1.5rem;     /* countdown font size */
  --rr-time-weight: 800;    /* countdown weight */
  --rr-overlay-left: 55px;
}

/* Scope positioning to roulette slides only */
.remark-slide-content.roulette { position: relative; }

/* Top floating controls (don’t affect layout) */
.rr-controls{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  z-index: 100; pointer-events: auto;
  background: rgba(255,255,255,.85); padding:.35rem .6rem; border-radius:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.rr-controls label{ font-size: 0.95rem; }
.rr-controls input[type="number"]{ width:6em; }
.rr-controls input[type="text"]{ width:12em; }
.rr-controls .rr-sep{ opacity:.35; }
.rr-hidden{ display:none !important; }

/* Bottom-left overlay container (ring + name) */
.rr-overlay{
  position:absolute; left:var(--rr-overlay-left, 20px); bottom:20px; z-index: 90;
  display:flex; align-items:center; gap:14px; pointer-events:none;
  color: var(--rr-fg, #111827);
}

/* Progress ring (left) */
.rr-progress{ position:relative; width:var(--rr-ring-size); height:var(--rr-ring-size); }
.rr-progress svg{ width:100%; height:100%; transform:rotate(-90deg); }
.rr-progress .rr-bg{ stroke:#e5e7eb; stroke-width:10; fill:none; }
.rr-progress .rr-fg{ stroke: currentColor; stroke-width:10; stroke-linecap:round; fill:none; }
.rr-progress .rr-time{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:var(--rr-time-size); font-weight:var(--rr-time-weight);
  color:#111827;
  background: rgba(255,255,255,.85); padding:.2rem .5rem; border-radius:6px;
}

/* Current name (right) */
.rr-name{
  max-width: 55vw; font-size: 2rem; line-height: 1.1; font-weight: 800;
  background: rgba(255,255,255,.88); padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0;
}

/* Config slide editors */
.rr-config-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top: 16px; }
.rr-config-wrap [data-roulette]{
  width:100%; min-height:240px; font-size:0.95rem; display:block;
  white-space:pre-wrap; padding:.5rem; border:1px solid #ccc; border-radius:6px;
}
.rr-config-wrap .rr-col > label{ font-weight:600; display:block; margin-bottom: 6px; }
.rr-help{ font-size: .85rem; opacity: .8; margin-top: 6px; }

@media (max-width: 1000px) {
  .rr-config-wrap{ grid-template-columns:1fr; }
  .rr-name{ font-size: 4.0em; max-width: 65vw; }
  .rr-progress{ width:calc(var(--rr-ring-size) - 12px); height:calc(var(--rr-ring-size) - 12px); }
  .rr-progress .rr-time{ font-size:calc(var(--rr-time-size) - 0.2rem); }
}

.roulette-roster {
  margin-left: 30px;
}

/* Optional dark-mode polish */
/* @media (prefers-color-scheme: dark) {
  .rr-controls,
  .rr-progress .rr-time,
  .rr-name { background: rgba(0,0,0,.35); color: #fff; }
  .rr-progress .rr-bg{ stroke:#374151; }
} */

/* ---------- Group-roulette overlay (grid of groups) ---------- */

/* The same top controls bar is reused (class .rr-controls) */

.rr-btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  padding: .28rem .7rem;
  font: inherit;
  cursor: pointer;
  background: rgba(255, 179, 204, 0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.rr-btn:hover{ filter: brightness(0.98); }
.rr-btn:active{ transform: translateY(1px); }

.gr-overlay{
  position: static;
  left: auto; right: auto; top: auto; bottom: auto;
  /* The overlay lands inside .boxed-content when there is one, and on the bare
     slide otherwise. A bare slide's content is often floated -- .cards and
     .boxed-content both are -- and a grid box does not shrink around a float,
     it renders underneath it. Clear first, then take the gap. */
  clear: both;
  /* padding, not margin: clearance swallows a top margin, so the gap would
     vanish on exactly the slides that need the clear. */
  padding-top: 40px;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
  pointer-events: auto; /* allow selection/copy */
}

/* Inside .boxed-content the overlay inherits that box's inset. On a bare slide
   it has the content box to itself, which runs to the slide's right edge, so
   the last group would sit flush against it. Stop where a card row stops. */
.remark-slide-content > .gr-overlay { margin-right: 55px; }

/* Group card */
.gr-group{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}
.gr-title{
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 1.1em;
  opacity: .9;
}
.gr-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.gr-list li{
  font-size: 1.2em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-empty{ opacity: .55; font-style: italic; }

/* Responsive and dark mode polish */
@media (max-width: 1000px){
  .gr-overlay{ top: 66px; left: 22px; right: 22px; gap: 12px; }
}
/* @media (prefers-color-scheme: dark){
  .rr-btn{ background: rgba(0,0,0,.35); color: #fff; border-color: rgba(255,255,255,.15); }
  .gr-group{ background: rgba(0,0,0,.35); color: #fff; border-color: rgba(255,255,255,.12); }
} */