:root {
  --timer-bg: #0b0d10;
  --timer-fg: #f4f6f8;
  --timer-green: #2ecc71;
  --timer-yellow: #f1c40f;
  --timer-red: #e74c3c;
  --timer-muted: #6b7480;
  --timer-panel: #15181d;
  --timer-border: #262b32;
  --timer-accent: #3d8bfd;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body.stagetimer {
  margin: 0;
  background: var(--timer-bg);
  color: var(--timer-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

/* ---- Room display ---- */

.timer-display {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.timer-display .room-name {
  position: absolute;
  top: 3vh;
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: var(--timer-muted);
}

.timer-digits {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  font-size: clamp(5rem, 25vw, 26rem);
  line-height: 1;
  transition: color 0.3s ease;
  color: var(--timer-green);
}

.timer-digits.yellow {
  color: var(--timer-yellow);
}

.timer-digits.red {
  color: var(--timer-red);
}

.timer-digits.scheduled {
  color: var(--timer-accent);
}

.scheduled-label {
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--timer-accent);
}

.conn-banner {
  position: absolute;
  bottom: 4vh;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid var(--timer-red);
  color: var(--timer-red);
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
}

/* ---- Speaker view ---- */

.timer-speaker {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  position: relative;
  padding: 0 5vw;
  text-align: center;
}

.timer-speaker .timer-digits {
  font-size: clamp(3rem, 18vw, 10rem);
}

.speaker-message {
  font-size: clamp(1.4rem, 6vw, 3rem);
  font-weight: 600;
  padding: 0.6em 1em;
  border-radius: 16px;
  background: var(--timer-panel);
  border: 2px solid var(--timer-border);
  max-width: 100%;
}

.speaker-message.warning {
  border-color: var(--timer-yellow);
  color: var(--timer-yellow);
}

.speaker-message.flash {
  animation: timer-flash 1s steps(1) infinite;
}

/* Speaker layout: big — both the clock and the message scale up together,
   for a device propped further away than arm's reach. */

.timer-speaker.layout-big .timer-digits {
  font-size: clamp(4rem, 22vw, 13rem);
}

.timer-speaker.layout-big .speaker-message {
  font-size: clamp(2rem, 7vw, 4.2rem);
  padding: 0.7em 1.2em;
}

/* Speaker layout: message-focus — the message becomes the dominant element
   (and moves above the clock) for when what it says matters more than the
   exact time; the clock stays large but secondary. */

.timer-speaker.layout-message-focus {
  gap: 3vh;
}

.timer-speaker.layout-message-focus .speaker-message {
  order: -1;
  font-size: clamp(2.2rem, 9vw, 5.5rem);
}

.timer-speaker.layout-message-focus .timer-digits {
  font-size: clamp(2rem, 10vw, 5rem);
  opacity: 0.85;
}

@keyframes timer-flash {
  50% {
    opacity: 0.25;
  }
}

/* ---- Landing ---- */

.timer-landing {
  max-width: 480px;
  margin: 10vh auto;
  padding: 0 1.5rem;
}

.timer-landing h1 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}

.timer-landing p {
  color: var(--timer-muted);
}

.timer-card {
  background: var(--timer-panel);
  border: 1px solid var(--timer-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.timer-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.timer-input {
  width: 100%;
  padding: 0.7em 0.9em;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--timer-border);
  background: var(--timer-bg);
  color: var(--timer-fg);
}

.timer-btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 0.8em 1.4em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--timer-accent);
  color: white;
  width: 100%;
  margin-top: 0.8rem;
}

.timer-btn.secondary {
  background: transparent;
  border: 1px solid var(--timer-border);
  color: var(--timer-fg);
}

/* ---- Help page ---- */

.help-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.help-page > header {
  margin-bottom: 1.5rem;
}

.help-page .back-link {
  display: inline-block;
  color: var(--timer-muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.help-page .back-link:hover {
  color: var(--timer-fg);
}

.help-page h1 {
  font-size: 2rem;
  margin: 0 0 0.4rem;
}

.help-page > header p {
  color: var(--timer-muted);
  max-width: 60ch;
}

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-toc a {
  color: var(--timer-accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.help-toc a:hover {
  text-decoration: underline;
}

.help-page .timer-card h2 {
  font-size: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.help-page .timer-card h3 {
  font-size: 1rem;
  margin: 1.2rem 0 0.4rem;
}

.help-page .timer-card p,
.help-page .timer-card li {
  color: var(--timer-muted);
  line-height: 1.6;
}

.help-page .timer-card ul,
.help-page .timer-card ol {
  padding-left: 1.3rem;
}

.help-page .timer-card code {
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--timer-fg);
}

.help-page .timer-card pre {
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-radius: 8px;
  padding: 0.8em 1em;
  overflow-x: auto;
}

.help-page .timer-card pre code {
  border: none;
  padding: 0;
  background: none;
}

.help-shortcuts {
  width: 100%;
  border-collapse: collapse;
}

.help-shortcuts th,
.help-shortcuts td {
  text-align: left;
  padding: 0.5em 0.6em;
  border-bottom: 1px solid var(--timer-border);
  color: var(--timer-muted);
}

.help-shortcuts th {
  color: var(--timer-fg);
  font-size: 0.85rem;
}

kbd {
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.15em 0.5em;
  font-size: 0.85em;
  color: var(--timer-fg);
  font-family: inherit;
}

/* ---- Controller ---- */

.timer-controller {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
}

.timer-controller header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.help-link {
  font-size: 0.85rem;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--timer-border);
  color: var(--timer-muted);
  text-decoration: none;
}

.help-link:hover {
  color: var(--timer-fg);
  border-color: var(--timer-fg);
}

.conn-status {
  font-size: 0.85rem;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--timer-border);
}

.conn-status.connected {
  color: var(--timer-green);
  border-color: var(--timer-green);
}

.conn-status.disconnected {
  color: var(--timer-red);
  border-color: var(--timer-red);
}

.controller-digits {
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 700;
  text-align: center;
  margin: 1rem 0;
}

.timer-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.timer-controls .timer-btn {
  width: auto;
  padding: 1em 2em;
  font-size: 1.2rem;
}

.nudge-row {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.nudge-row .timer-btn {
  width: auto;
  flex: 1;
}

.cue-nav {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.cue-nav .timer-btn {
  width: auto;
  flex: 1;
}

.cue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cue-row {
  border: 1px solid var(--timer-border);
  border-radius: 8px;
  background: var(--timer-bg);
}

.cue-row.active {
  border-color: var(--timer-accent);
}

.cue-view {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
}

.cue-drag-handle {
  cursor: grab;
  color: var(--timer-muted);
  user-select: none;
}

.cue-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  min-width: 0;
}

.cue-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cue-duration {
  color: var(--timer-muted);
  font-variant-numeric: tabular-nums;
}

.cue-badge {
  font-size: 0.75rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--timer-accent);
  color: var(--timer-accent);
}

.cue-icon-btn {
  background: none;
  border: 1px solid var(--timer-border);
  border-radius: 6px;
  color: var(--timer-fg);
  cursor: pointer;
  padding: 0.4em 0.7em;
}

.cue-icon-btn.danger {
  color: var(--timer-red);
  border-color: var(--timer-red);
}

.cue-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cue-form {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cue-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--timer-muted);
}

.cue-form-row input[type="number"] {
  width: 4.5em;
  padding: 0.4em;
  border-radius: 6px;
  border: 1px solid var(--timer-border);
  background: var(--timer-bg);
  color: var(--timer-fg);
}

.cue-name-input {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.mirror-box {
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
}

.mirror-digits {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 4rem);
  color: var(--timer-green);
}

.mirror-digits.yellow {
  color: var(--timer-yellow);
}

.mirror-digits.red {
  color: var(--timer-red);
}

.mirror-message {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5em 1em;
  border-radius: 8px;
  background: var(--timer-panel);
  border: 1px solid var(--timer-border);
  font-weight: 600;
}

.mirror-message.warning {
  border-color: var(--timer-yellow);
  color: var(--timer-yellow);
}

.mirror-message.flash {
  animation: timer-flash 1s steps(1) infinite;
}

.message-textarea {
  resize: vertical;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.message-options {
  display: flex;
  gap: 1.5rem;
  margin: 0.8rem 0;
  font-size: 0.9rem;
  color: var(--timer-muted);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.preset-chip {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--timer-border);
}

.preset-chip .timer-btn {
  width: auto;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0.6em 1em;
}

.preset-remove {
  background: var(--timer-panel);
  border: none;
  border-left: 1px solid var(--timer-border);
  color: var(--timer-muted);
  cursor: pointer;
  padding: 0 0.7em;
}

.preset-add {
  display: flex;
  gap: 0.6rem;
}

.preset-add .timer-input {
  width: auto;
  flex: 1;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  font-size: 1rem;
}

.preset-add .timer-btn {
  width: auto;
  margin: 0;
}

.share-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.share-link-card {
  text-align: center;
}

.share-link-card img {
  background: white;
  padding: 8px;
  border-radius: 8px;
  width: 140px;
  height: 140px;
}

.share-link-card code {
  display: block;
  margin: 0.5rem 0;
  word-break: break-all;
  color: var(--timer-muted);
  font-size: 0.85rem;
}

.room-not-found {
  max-width: 480px;
  margin: 20vh auto;
  text-align: center;
  padding: 0 1.5rem;
}

.room-not-found-hint {
  font-size: 0.82rem;
  color: var(--timer-muted);
  margin-top: 0.5rem;
}

/* ---- Controller: display options + control token ---- */

.layout-picker-label {
  font-size: 0.85rem;
  color: var(--timer-muted);
  margin-bottom: 0.5rem;
}

.layout-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7em 0.5em;
  border-radius: 10px;
  border: 1px solid var(--timer-border);
  background: var(--timer-bg);
  color: var(--timer-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.layout-option.active {
  border-color: var(--timer-accent);
  color: var(--timer-fg);
}

.layout-swatch {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 6px;
  background: var(--timer-panel);
  border: 1px solid var(--timer-border);
  position: relative;
  overflow: hidden;
}

.layout-swatch::before,
.layout-swatch::after {
  content: '';
  position: absolute;
  background: currentColor;
  color: var(--timer-muted);
}

.layout-option.active .layout-swatch::before,
.layout-option.active .layout-swatch::after {
  color: var(--timer-accent);
}

.layout-swatch-classic::after {
  width: 55%;
  height: 30%;
  top: 35%;
  left: 22.5%;
  border-radius: 3px;
}

.layout-swatch-fullbleed::after {
  width: 90%;
  height: 70%;
  top: 15%;
  left: 5%;
  border-radius: 3px;
}

.layout-swatch-corner::after {
  width: 40%;
  height: 35%;
  bottom: 12%;
  left: 8%;
  border-radius: 3px;
}

.layout-swatch-big::after {
  width: 70%;
  height: 45%;
  top: 27.5%;
  left: 15%;
  border-radius: 3px;
}

.layout-swatch-message-focus::after {
  width: 65%;
  height: 30%;
  top: 15%;
  left: 17.5%;
  border-radius: 3px;
}

.layout-swatch-split::before {
  width: 52%;
  height: 62%;
  top: 19%;
  left: 5%;
  border-radius: 3px;
}

.layout-swatch-split::after {
  width: 30%;
  height: 62%;
  top: 19%;
  right: 5%;
  border-radius: 3px;
  opacity: 0.55;
}

.layout-swatch-banner::before {
  width: 84%;
  height: 22%;
  top: 10%;
  left: 8%;
  border-radius: 3px;
  opacity: 0.55;
}

.layout-swatch-banner::after {
  width: 50%;
  height: 32%;
  bottom: 14%;
  left: 25%;
  border-radius: 3px;
}

.layout-swatch-stack::before {
  width: 46%;
  height: 20%;
  top: 12%;
  left: 27%;
  border-radius: 3px;
  opacity: 0.55;
}

.layout-swatch-stack::after {
  width: 60%;
  height: 32%;
  bottom: 14%;
  left: 20%;
  border-radius: 3px;
}

.layout-hint {
  font-size: 0.82rem;
  color: var(--timer-muted);
  margin: -0.4rem 0 1rem;
}

.display-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: var(--timer-muted);
}

.room-name-input {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

#btn-blackout.active {
  background: var(--timer-fg);
  color: var(--timer-bg);
  border-color: var(--timer-fg);
}

.control-token-hint {
  font-size: 0.85rem;
  color: var(--timer-muted);
  line-height: 1.5;
}

.control-token-hint code {
  color: var(--timer-fg);
}

.timer-card > code {
  display: block;
  margin: 0.5rem 0;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  word-break: break-all;
}

/* ---- Room display: clock, cue name, next cue, progress bar, fullscreen ---- */

.display-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Invisible by default: the clock/name/digits/progress cluster renders as if
   its 6 children were direct flex items of .display-content (unchanged
   behavior for classic/fullbleed/corner). Layouts that need to treat the
   whole cluster as a single box (to sit it next to the message) turn this
   into a real flex container instead — see layout-split below. */
.display-primary {
  display: contents;
}

/* Every layout gives the message somewhere to go (each `layout-*` block below
   sets its own `display`) — this bare rule is just the safety default so a
   future layout that forgets to opt in stays message-less instead of
   showing a stray unstyled block. Visibility of an actual message
   (message.visible/text) is separately driven by the `hidden` attribute in
   display.js, which always wins via the global `[hidden]` rule regardless of
   what a layout sets `display` to. */
.display-message {
  display: none;
  font-weight: 700;
}

.display-message.warning {
  border-color: var(--timer-yellow);
  color: var(--timer-yellow);
}

.display-message.flash {
  animation: timer-flash 1s steps(1) infinite;
}

.clock-corner {
  position: absolute;
  top: 3vh;
  right: 4vw;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  color: var(--timer-muted);
}

.cue-name {
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: var(--timer-muted);
  margin-bottom: 1rem;
}

.next-cue {
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--timer-muted);
  margin-top: 1rem;
}

.progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--timer-panel);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--timer-accent);
  transition: width 0.2s linear;
}

/* Layout: fullbleed — digits fill almost the whole viewport, metadata shrinks out of the way. */

.timer-display.layout-fullbleed .timer-digits {
  font-size: clamp(7rem, 34vw, 38rem);
}

.timer-display.layout-fullbleed .cue-name,
.timer-display.layout-fullbleed .next-cue {
  font-size: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: 0.3rem 0;
}

.timer-display.layout-fullbleed .clock-corner {
  font-size: clamp(0.8rem, 1.4vw, 1.2rem);
}

/* Layout: corner — everything shrinks into a small panel anchored bottom-left,
   for use as an unobtrusive overlay (pairs well with ?transparent=1). */

.timer-display.layout-corner .display-content {
  position: absolute;
  top: auto;
  bottom: 4vh;
  left: 4vw;
  height: auto;
  width: auto;
  max-width: 70vw;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  gap: 0.3rem;
}

.timer-display.layout-corner .timer-digits {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
}

.timer-display.layout-corner .cue-name,
.timer-display.layout-corner .next-cue,
.timer-display.layout-corner .room-name,
.timer-display.layout-corner .clock-corner,
.timer-display.layout-corner .display-message {
  position: static;
  margin: 0;
  font-size: clamp(0.75rem, 1.4vw, 1rem);
}

.timer-display.layout-corner .display-message {
  order: -1;
  display: block;
  margin-bottom: 0.3rem;
}

.timer-display.layout-corner .progress-wrap {
  position: static;
  width: 100%;
  height: 4px;
  margin-top: 0.3rem;
}

/* Layout: split — a ProPresenter-style stage-monitor display: every piece of
   information sits in its own bordered box with a small caption underneath
   (added via ::after so no markup changes were needed). The countdown and
   the wall clock get equal visual weight side by side on the left — this
   used to be a tiny corner label; a presenter reading it from a monitor
   wants it just as legible as the countdown. Message + next-cue live on the
   right. When there's no message, the message box collapses and the left
   side's flex-grow fills the freed width — no JS needed to resize anything.

   .display-primary becomes a real (non-`contents`) grid for this layout so
   digits/clock/cue-name/next-cue can be freely arranged in a 2-column grid
   instead of one centered stack — which also makes it the containing block
   for room-name's absolute positioning. Without `position: relative` here,
   room-name would fall back to .display-content (the full-width row) and
   could render on top of the message panel instead of staying on the left. */

.timer-display.layout-split .display-content {
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 1rem;
  padding: 1.2rem;
}

.timer-display.layout-split .display-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "roomname roomname"
    "name     name"
    "timer    clock"
    "next     next";
  gap: 0.4rem;
  position: relative;
  flex: 1 1 58%;
  min-width: 0;
  padding: 0.5rem;
}

.timer-display.layout-split .room-name {
  grid-area: roomname;
  position: static;
  margin: 0 0 0.4rem;
}

.timer-display.layout-split .cue-name {
  grid-area: name;
  margin: 0 0 0.4rem;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
}

.timer-display.layout-split .timer-digits,
.timer-display.layout-split .clock-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid var(--timer-border);
  border-radius: 12px;
  padding: 0.5rem 0.5rem 1.6rem;
}

.timer-display.layout-split .timer-digits {
  grid-area: timer;
  font-size: clamp(2.2rem, 8.5vw, 6.5rem);
}

.timer-display.layout-split .clock-corner {
  grid-area: clock;
  top: auto;
  right: auto;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 6vw, 4.5rem);
  color: var(--timer-fg);
  font-weight: 700;
}

.timer-display.layout-split .timer-digits::after,
.timer-display.layout-split .clock-corner::after {
  content: 'TIME REMAINING';
  position: absolute;
  bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--timer-muted);
}

.timer-display.layout-split .clock-corner::after {
  content: 'CLOCK';
}

.timer-display.layout-split .next-cue {
  grid-area: next;
  margin: 0;
  border: 2px solid var(--timer-border);
  border-radius: 12px;
  padding: 0.6rem 0.8rem 1.6rem;
  position: relative;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
}

.timer-display.layout-split .next-cue::after {
  content: 'COMING UP NEXT';
  position: absolute;
  bottom: 0.4rem;
  left: 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--timer-muted);
}

.timer-display.layout-split .display-message {
  flex: 1 1 42%;
  min-width: 0;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: break-word;
  position: relative;
  background: var(--timer-panel);
  border: 2px solid var(--timer-green);
  border-radius: 12px;
  margin: 0.5rem;
  padding: 3rem 2rem 2.4rem;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.3;
  text-align: center;
  color: var(--timer-green);
}

.timer-display.layout-split .display-message::after {
  content: 'STAGE MESSAGE';
  position: absolute;
  bottom: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--timer-muted);
}

.timer-display.layout-split .display-message.warning {
  border-color: var(--timer-yellow);
  color: var(--timer-yellow);
}

/* Layout: banner — the message becomes a full-width strip across the top,
   like a lower-third turned upper-third; digits own the remaining space and
   recenter automatically when there's no message to show. */

.timer-display.layout-banner .display-content {
  flex-direction: column;
}

.timer-display.layout-banner .display-message {
  order: -1;
  flex: 0 0 auto;
  width: 100%;
  display: block;
  background: var(--timer-panel);
  border-bottom: 2px solid var(--timer-border);
  padding: 1.1rem 4vw;
  font-size: clamp(1.3rem, 3.6vw, 2.8rem);
  text-align: center;
}

.timer-display.layout-banner .display-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Layout: stack — a vertical "notification" arrangement. The message becomes
   a rounded chip that sits above the digits (via order) instead of an
   afterthought below them; digits stay the single largest element since this
   is still primarily a room display, not a message board.

   The same "chip above the digits" treatment is shared by classic and
   fullbleed — those two never had a message at all before, so this is also
   the default look for any layout that doesn't carve out its own dedicated
   message zone (split, banner). */

.timer-display.layout-stack .display-content {
  gap: 1.2rem;
}

.timer-display.layout-classic .display-message,
.timer-display.layout-fullbleed .display-message,
.timer-display.layout-stack .display-message {
  order: -1;
  display: block;
  max-width: 85vw;
  padding: 0.7em 1.3em;
  border-radius: 16px;
  background: var(--timer-panel);
  border: 2px solid var(--timer-border);
  font-size: clamp(1.3rem, 3.6vw, 2.6rem);
  text-align: center;
}

.timer-display.layout-classic .display-message,
.timer-display.layout-fullbleed .display-message {
  margin-bottom: 1.2rem;
}

.timer-display.layout-stack .timer-digits {
  font-size: clamp(4.5rem, 22vw, 18rem);
}

.timer-display.layout-stack .progress-wrap {
  position: static;
  width: min(70vw, 500px);
  height: 8px;
  margin-top: 0.2rem;
}

/* On-screen controls: a hover-revealed cluster (fullscreen + layout settings)
   bottom-right on the display, or just settings on the speaker view. Hidden
   by default so they don't clutter the audience-facing screen; showing on
   hover assumes an operator standing at the device, not the audience. */

.display-controls {
  position: absolute;
  bottom: 3vh;
  right: 3vw;
  display: flex;
  gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.timer-display:hover .display-controls,
.timer-speaker:hover .display-controls,
.display-controls.open {
  opacity: 1;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--timer-border);
  color: var(--timer-fg);
  border-radius: 8px;
  width: 2.6em;
  height: 2.6em;
  font-size: 1.2rem;
  cursor: pointer;
}

.settings-popover {
  position: absolute;
  bottom: calc(3vh + 3.4em);
  right: 3vw;
  width: 220px;
  background: var(--timer-panel);
  border: 1px solid var(--timer-border);
  border-radius: 12px;
  padding: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.settings-popover-label {
  font-size: 0.8rem;
  color: var(--timer-muted);
  margin-bottom: 0.6rem;
}

.settings-popover .layout-picker {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0.4rem;
  margin-bottom: 0;
}

.settings-popover .layout-option {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.5em 0.7em;
}

.settings-popover .layout-swatch {
  width: 40px;
  height: 26px;
  flex-shrink: 0;
}

.timer-display.transparent {
  background: transparent !important;
}

body.transparent-bg,
html.transparent-bg {
  background: transparent !important;
}

.timer-display.minimal .clock-corner,
.timer-display.minimal .room-name,
.timer-display.minimal .cue-name,
.timer-display.minimal .next-cue,
.timer-display.minimal .progress-wrap,
.timer-display.minimal .display-message,
.timer-display.minimal .display-controls,
.timer-display.minimal .settings-popover {
  display: none !important;
}

/* "Minimal" means bare digits, full stop — split's box/caption decoration
   (added purely via ::after, see layout-split above) doesn't belong here. */
.timer-display.minimal .timer-digits {
  border: none !important;
  padding: 0 !important;
}

.timer-display.minimal .timer-digits::after {
  content: none !important;
}

/* split's 2-column grid only exists to arrange the digits/clock/message
   boxes relative to each other — with everything but digits hidden in
   minimal mode there's nothing left to arrange, so just center them like
   every other layout's minimal mode does. */
.timer-display.layout-split.minimal .display-primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.timer-display.blackout .display-content {
  visibility: hidden;
}