/* The room clock (public/room-clock-hud.js) and the moment a Focus phase ends (public/room-moment-ui.js).
   Frosted glass like every HUD; phase colours are the page's own (--p-focus, --p-break through [data-p]). */

/* ---- the clock: floating under the top bar, centred */
.rc.hud { position: fixed; z-index: 14; top: calc(var(--bar, 50px) + 2 * var(--gap)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 8px; border-radius: 999px; color: var(--ink); pointer-events: none; background: color-mix(in srgb, var(--c, var(--faint)) 9%, var(--hud)); border-color: color-mix(in srgb, var(--c, var(--faint)) 38%, var(--hud-line)); transition: background .6s ease, border-color .6s ease; }
.rc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--faint)) 55%, transparent); }
.rc-ring { position: relative; flex: none; width: 52px; height: 52px; }
.rc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rc-ring circle { fill: none; stroke-width: 4; }
.rc-ring .track { stroke: color-mix(in srgb, var(--ink) 13%, transparent); }
.rc-ring .arc { stroke: var(--c, var(--faint)); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .6s ease; }
.rc-time { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rc-label { font-size: 15.5px; font-weight: 700; color: color-mix(in srgb, var(--c, var(--ink)) 55%, var(--ink)); white-space: nowrap; }
.rc-sub, .rc-mini { color: var(--hud-muted); font-size: 12px; white-space: nowrap; }
.rc-mini { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rc-mini[hidden], .rc-sub[hidden] { display: none; }
.rc-mini i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--faint)); }
.rc-mini i[data-p="focus"] { background: var(--p-focus); }
.rc-mini i[data-p="break"] { background: var(--p-break); }
.rc[data-mode="own"] .rc-ring { width: 56px; height: 56px; }

.rc.flip::before { animation: rc-halo 1.1s ease-out; }
.rc.flip .rc-ring { animation: rc-pop .9s cubic-bezier(.2, .9, .3, 1.25); }
.rc.flip .arc { transition: none; }
@keyframes rc-halo { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--faint)) 55%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 26px color-mix(in srgb, var(--c, var(--faint)) 0%, transparent); } }
@keyframes rc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* The status bar's own copy of the room's time steps aside while this clock is up. */
body.rc-on .room-clock { display: none; }

/* ---- a phone: the clock sits in the top bar's free stretch, on the bar's own glass */
@media (max-width: 760px) {
  /* Centred in the bar's row of buttons, below the type band (room-hud.css) when the bar has one. */
  .rc.hud { top: calc(var(--gap) + var(--band-h, 0px) + (var(--bar, 50px) - var(--band-h, 0px)) / 2); left: auto; right: 100px; transform: translateY(-50%); gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 21; transition: none; }
  .rc::before { display: none; }
  .rc-ring, .rc[data-mode="own"] .rc-ring { width: 42px; height: 42px; }
  .rc-ring circle { stroke-width: 4; }
  .rc-time { font-size: 10px; font-weight: 650; letter-spacing: -.04em; }
  .rc-label { font-size: 13px; }
  .rc-sub { display: none; }
  .rc-mini { font-size: 11px; }
  .rc.rc-tight .rc-text { display: none; }
  body.rc-no-name .rn-short { display: none; }
}

/* ---- the moment: a warm wash over the room, a line, and (on the canvas) particles */
.rm-flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 72% 66% at 50% 46%, rgba(255, 196, 108, .55), rgba(255, 160, 70, .3) 50%, rgba(255, 140, 60, .12) 100%); }
.rm-flash.on { animation: rm-flash 2.4s ease-out both; }
@keyframes rm-flash { 0% { opacity: 0; transform: scale(.94); } 14% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
.rm-line { position: fixed; z-index: 24; left: 50%; top: calc(var(--bar, 50px) + 2 * var(--gap) + 74px); margin: 0; max-width: min(460px, calc(100vw - 2 * var(--gap))); padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 650; text-align: center; color: var(--ink); pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.96); background: color-mix(in srgb, var(--accent) 22%, var(--hud)); border-color: color-mix(in srgb, var(--accent) 60%, var(--hud-line)); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .35s; }
.rm-line.on { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
@media (max-width: 760px) { .rm-line { top: calc(var(--bar, 50px) + 2 * var(--gap) + 128px); width: max-content; padding: 8px 14px; font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .rc.hud { transition: none; }
  .rc-ring .arc { transition: none; }
  .rc.flip .rc-ring { animation: none !important; }
  .rc.flip::before { animation: rm-fade .8s ease-out !important; }
  .rc.flip::before { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--faint)) 55%, transparent); }
  .rm-flash.on { animation: rm-fade 2s ease-out both !important; }
  .rm-line { transform: translate(-50%, 0); transition: opacity .35s ease, visibility 0s .35s; }
}
@keyframes rm-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
body.pip .rc, body.record .rc, body.pip .rm-flash, body.record .rm-flash, body.pip .rm-line, body.record .rm-line { display: none !important; }