/* Game timers (kind "turns"): turn timer, board game timer, chess clock. Scoped to [data-turns] or turns- classes. */
[data-turns] .turns-main { display: flex; flex-direction: column; gap: 10px; }
[data-turns] .turns-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-weight: 600; color: var(--body); padding: 0 6px; font-variant-numeric: tabular-nums; }
[data-turns] .turns-state { margin-left: auto; color: var(--ink); }
[data-turns] .turns-tap { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: clamp(260px, 50vh, 520px); border: 0; border-radius: 12px; background: var(--canvas); cursor: pointer; padding: 28px 12px 16px; font: inherit; color: inherit; }
[data-turns] .turns-tap:active { background: var(--softer); }
[data-turns] .turns-bar { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--soft); }
[data-turns] .turns-bar i { display: block; height: 100%; width: 100%; background: var(--tc, var(--ink)); transition: width .1s linear; }
[data-turns] .turns-who { font-weight: 700; font-size: clamp(22px, 5vw, 36px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-turns] .turns-time { font-size: clamp(88px, 24vw, 240px); }
[data-turns] .turns-over { font-weight: 700; font-size: clamp(16px, 3.5vw, 24px); background: var(--ink); color: var(--on-ink); border-radius: var(--pill); padding: 4px 14px; font-variant-numeric: tabular-nums; }
[data-turns].turns-late .turns-time { opacity: .55; }
[data-turns] .turns-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 0; flex: none; }
[data-turns] .turns-order { display: flex; flex-wrap: wrap; gap: 6px; }
[data-turns] .turns-chip { border: 0; border-radius: var(--pill); background: var(--canvas); min-height: 44px; padding: 6px 14px; font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-turns] .turns-chip:hover { background: var(--pressed); }
[data-turns] .turns-chip.is-cur { background: var(--ink); color: var(--on-ink); }
[data-turns] .turns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
[data-turns] .turns-tile { border: 0; border-radius: 12px; background: var(--canvas); padding: 10px 12px; min-height: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
[data-turns] .turns-tile:hover { background: var(--pressed); }
[data-turns] .turns-tile.is-cur { background: var(--ink); color: var(--on-ink); }
[data-turns] .turns-tile.is-out { opacity: .55; }
[data-turns] .turns-tname { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
[data-turns] .turns-tval { font-weight: 800; font-size: 32px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
[data-turns] .turns-tsub { font-size: 13px; opacity: .8; }
[data-turns] .turns-tap:focus-visible, [data-turns] .turns-side:focus-visible, [data-turns] .turns-tile:focus-visible, [data-turns] .turns-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* chess clock */
[data-turns] .turns-presets { align-self: flex-start; }
[data-turns] .turns-presets button { font-variant-numeric: tabular-nums; min-width: 52px; }
[data-turns] .turns-chess { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
[data-turns] .turns-side { border: 0; border-radius: 12px; background: var(--canvas); color: var(--ink); min-height: clamp(240px, 46vh, 480px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; cursor: pointer; font: inherit; min-width: 0; }
[data-turns] .turns-side.is-cur { background: var(--ink); color: var(--on-ink); }
[data-turns] .turns-side.is-cur.is-paused { background: var(--pressed); color: var(--ink); }
[data-turns] .turns-side.is-flag { box-shadow: inset 0 0 0 6px var(--ink); }
[data-turns] .turns-sname { font-weight: 700; font-size: clamp(18px, 3.5vw, 26px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-turns] .turns-stime { font-size: clamp(56px, 11vw, 150px); }
[data-turns] .turns-sinfo { font-size: 15px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
[data-turns] .turns-cmid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-weight: 600; min-width: 110px; font-variant-numeric: tabular-nums; }
[data-turns] .turns-cmid .turns-state { margin: 0; font-size: 14px; color: var(--body); max-width: 160px; }
[data-turns] .turns-swap { min-height: 40px; padding: 8px 14px; font-size: 14px; background: var(--canvas); }
@media (max-width: 640px) {
  [data-turns] .turns-chess { grid-template-columns: 1fr; }
  [data-turns] .turns-side { min-height: clamp(200px, 34vh, 360px); }
  [data-turns] .turns-stime { font-size: clamp(64px, 20vw, 120px); }
  [data-turns] .turns-cmid { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  [data-turns] .turns-cmid .turns-state { max-width: none; }
  [data-turns] .turns-flip .turns-side:first-child { transform: rotate(180deg); }
}

/* stats under the stage */
[data-turns] .turns-stats { margin-top: 12px; }
[data-turns] .turns-stats td .turns-dot { width: 10px; height: 10px; margin-right: 6px; }
[data-turns] .turns-note { font-size: 13px; margin: 6px 0 0; }
[data-turns] .turns-names { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
[data-turns] .turns-names:empty { display: none; }

/* full screen: the timer fills the screen, tools stay reachable */
body.is-focus [data-turns] .turns-tools .pill { display: inline-flex; }
body.is-focus [data-turns] .turns-main { flex: 1; min-height: 0; }
body.is-focus [data-turns] .turns-tap { flex: 1; min-height: 0; }
body.is-focus [data-turns] .turns-chess { flex: 1; }
body.is-focus [data-turns] .turns-side { min-height: 0; }
@media (max-width: 520px) {
  [data-turns] .turns-grid { grid-template-columns: 1fr 1fr; }
  [data-turns] .turns-tval { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { [data-turns] .turns-bar i { transition: none; } }