/* globals/test/styles.css
   Playground-only layout
*/

/* Center the whole scene like your old pages */
html, body{
  height:100%;
}
/* Slider row: label (slider) value */
.slider-row{
  width: min(92vw, 820px);
}

.slider-grow{
  flex: 1;
  min-width: 260px;
  max-width: 700px;
}
body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Radio buttons centered */
.ui-radio-group{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.ui-radio-group.centered{
  justify-content:center;
}

.ui-radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Settings button (fixed top-left) */
.settings-btn{
  position:fixed;
  top:16px;
  left:16px;
  z-index:2100;
}

/* Main layout wrapper */
.playground{
  width:min(96vw, 1100px);
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:14px; /* tighter like “before” */
}

/* The face (classic big centered) */
.clock-face{
  font-family: var(--font-display);
  font-size: 7.5em;
  line-height: 1;
  user-select:none;
  margin:0;
  padding:0;
}

/* Responsive scaling like older layouts */
@media (max-width: 900px){
  .clock-face{ font-size: 5em; }
}
@media (max-width: 560px){
  .clock-face{ font-size: 3.0em; }
}

/* Buttons row directly under face */
.controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;

  margin-top: 2px;
}

/* Description (subtle + not too wide) */
.desc{
  max-width:min(92vw, 900px);
  margin-top: 2px;
}

html,
body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}