/* Cube timer */
.ct-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.ct-sess { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.ct-sess .field { min-width: 180px; flex: 1 1 180px; }
.ct-stage { background: var(--soft); border-radius: var(--r-lg); padding: 20px 24px 24px; text-align: center; position: relative; }
.ct-scr-text { font-family: var(--mono); font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0 auto 10px; max-width: 900px; word-spacing: 4px; min-height: 30px; overflow-wrap: anywhere; }
.ct-scr-text.ct-long { font-size: 16px; }
.ct-scr-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ct-timer { margin: 18px auto 8px; padding: 18px 8px 22px; border-radius: 18px; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; outline-offset: 4px; }
.ct-timer:hover { background: var(--soft-2); }
.ct-time { font-size: clamp(72px, 19vw, 176px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-sub { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 14px; min-height: 18px; }
.ct-stage[data-state="hold"] .ct-time { color: var(--err); }
.ct-stage[data-state="ready"] .ct-time { color: var(--ok); }
.ct-stage[data-state="inspect"] .ct-time { color: var(--ink); }
.ct-last { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.ct-last .label { font-family: var(--mono); text-transform: uppercase; font-size: 12px; letter-spacing: .6px; }
.ct-exit { display: none; }
.ct-split { margin-top: 16px; }
.ct-stats td:not(:first-child), .ct-stats th:not(:first-child) { text-align: right; }
.ct-stats td { padding: 8px 10px; }
.ct-preview { display: flex; justify-content: center; }
.ct-preview svg { width: 100%; max-width: 360px; max-height: 340px; height: auto; }
.ct-charts { margin-top: 16px; }
.ct-chart svg { width: 100%; height: auto; display: block; }
.ct-grid { stroke: var(--line); stroke-width: 1; }
.ct-ax { font: 11px var(--mono); fill: var(--muted); }
.ct-l1 { fill: none; stroke: var(--subtle); stroke-width: 1; }
.ct-dot { fill: var(--subtle); }
.ct-l5 { fill: none; stroke: var(--ink); stroke-width: 2; }
.ct-l12 { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.ct-bar { fill: var(--ink); }
.ct-legend { font-size: 13px; color: var(--muted); margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ct-legend span[class^="k"] { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: -8px; }
.ct-legend .k1 { border-top: 1px solid var(--subtle); } .ct-legend .k5 { border-top: 2px solid var(--ink); } .ct-legend .k12 { border-top: 2px dashed var(--ink); }
.ct-list { margin-top: 16px; }
.ct-list-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ct-list-h .actions { margin-top: 0; }
.ct-list-h .panel-h { margin: 0; }
.ct-import { position: relative; }
.ct-add { display: flex; gap: 8px; align-items: flex-end; margin: 14px 0; max-width: 420px; }
.ct-add .field { flex: 1; }
.ct-solves td { padding: 6px 10px; }
.ct-solves tr.open td { background: var(--canvas); }
.ct-cmt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.ct-detail { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-top: 12px; }
.ct-d-scr { font-family: var(--mono); margin: 0 0 4px; overflow-wrap: anywhere; }
.ct-d-c { margin-top: 12px; }
.ct-opts { margin-top: 16px; }
.ct-opt-row { gap: 4px 20px; margin-bottom: 8px; }
.ct-hold { min-width: 160px; }
.ct-keys { margin-top: 8px; }
.ct-keys td:first-child { white-space: nowrap; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: var(--canvas); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* While the timer runs: nothing else reacts to taps, and the rest of the stage fades. */
html.ct-running body * { pointer-events: none; }
html.ct-running .ct-scr, html.ct-running .ct-last { visibility: hidden; }

/* Focus mode: the stage fills the screen */
html.ct-focus .ct-stage { position: fixed; inset: 0; z-index: 80; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px; overflow: auto; background: var(--canvas); }
html.ct-focus .ct-stage:fullscreen { background: var(--canvas); }
html.ct-focus .ct-exit { display: inline-flex; margin: 16px auto 0; }
html.ct-focus .ct-time { font-size: clamp(88px, 24vw, 260px); }
html.ct-focus body { overflow: hidden; }
html.ct-focus #ct-focus { display: none; }

@media (max-width: 760px) {
  .ct-stage { padding: 16px 12px 18px; border-radius: 18px; }
  .ct-scr-text { font-size: 17px; }
  .ct-scr-text.ct-long { font-size: 14px; }
  .ct-puz { width: 100%; }
  .ct-sess { width: 100%; }
  .ct-sess .field { flex-basis: 100%; }
  .ct-solves th:nth-child(4), .ct-solves td:nth-child(4) { display: none; }
}

.ct-puz { min-width: 140px; }
.ct-scr-text { white-space: pre-line; }
/* Phones: the scramble and the timer come first; puzzle and session choice below them */
@media (max-width: 760px) {
  .ct { display: flex; flex-direction: column; }
  .ct-stage { order: -1; padding: 12px 12px 16px; }
  .ct-top { margin: 12px 0 0; }
  .ct-timer { margin: 8px auto 4px; padding: 12px 8px 14px; }
  .ct-scr-text { font-size: 17px; margin-bottom: 6px; }
  .ct-scr-text.ct-long { font-size: 14px; max-height: 8.6em; overflow-y: auto; overscroll-behavior: contain; }
}