*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg: #000;
  --accent: #ffffff;
  --secondary: #aaaaaa;
  --time-size:  clamp(3.8rem, 15vw, 10rem);
  --ampm-size:  clamp(1.4rem,  4vw,  3rem);
  --label-size: clamp(1.1rem,  3vw,  2.2rem);
  --date-size:  clamp(1.1rem,  3vw,  2rem);
  --dst-size:   clamp(0.6rem, 1.4vw, 1rem);
  --font-scale: 1;
  --scale-city: 1;
  --scale-time: 1;
  --scale-date: 1;
  --scale-weather: 1;
  --burn-offset-x: 0px;
  --burn-offset-y: 0px;
}

html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:'Barlow Condensed',sans-serif; }
body { display:flex; align-items:stretch; justify-content:stretch; }

/* ── Slideshow layer ── */
#slideshow {
  position:fixed; inset:0; z-index:0; background:#000;
  transition:opacity 1s ease;
}
#slideshow .slide {
  position:absolute; inset:-5%; width:110%; height:110%;
  background-size:cover; background-position:center;
  transition:opacity 1.5s ease;
  opacity:0;
}
#slideshow .slide.active { opacity:1; }

/* ── Pairing screen ── */
#pairing-screen {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#000; gap:16px;
}
.pair-title {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:3rem;
  color:#fff; letter-spacing:0.15em;
}
.pair-sub {
  font-size:1.1rem; color:rgba(255,255,255,0.5); letter-spacing:0.1em;
}
#qr-container {
  background:#fff; padding:16px; border-radius:12px; margin:12px 0;
}
.pair-code {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:2.5rem;
  color:#fff; letter-spacing:0.4em;
}
.pair-url {
  font-size:0.9rem; color:rgba(255,255,255,0.3); letter-spacing:0.1em;
}
.pair-status {
  font-size:0.95rem; color:rgba(255,255,255,0.5);
}

/* The full clock-card view (#app) was removed — clocks render via .overlay-clock. */
.city {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:calc(var(--label-size) * var(--font-scale) * var(--scale-city));
  color:var(--clk,var(--accent)); letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:0.15em; text-align:center;}
.time-row { display:flex; align-items:baseline; gap:0.12em; }
.time-digits {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:calc(var(--time-size) * var(--font-scale) * var(--scale-time));
  color:var(--clk,var(--accent)); letter-spacing:-0.02em; line-height:1;
  font-variant-numeric:tabular-nums;}
.time-suffix { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding-bottom:0.1em; }
.ampm {
  font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:calc(var(--ampm-size) * var(--font-scale) * var(--scale-time));
  color:var(--clk,var(--accent)); letter-spacing:0.05em; line-height:1;}
.dst-badge { display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.dst-badge span {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:var(--dst-size);
  color:var(--accent); opacity:0.6; letter-spacing:0.08em; display:block;}
.separator { width:40%; height:1px; background:var(--clk,var(--accent)); opacity:0.18; margin:0.3em auto 0.2em; }
.date-line {
  font-family:'Barlow Condensed',sans-serif; font-weight:400;
  font-size:calc(var(--date-size) * var(--font-scale) * var(--scale-date));
  color:var(--clk,var(--accent)); letter-spacing:0.18em; text-align:center; margin-top:0.2em;}
.day-line {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:calc(var(--date-size) * var(--font-scale) * var(--scale-date));
  color:var(--clk,var(--accent)); letter-spacing:0.22em; text-align:center;
  margin-top:0.08em; text-transform:uppercase;}
.weather-line {
  font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:calc(var(--dst-size) * var(--scale-weather));
  color:var(--clk,var(--accent)); opacity:0.7; letter-spacing:0.12em; text-align:center;
  margin-top:0.4em; min-height:1em;}

/* ── Overlay mode ── */
#overlay-bar {
  position:fixed; inset:0; z-index:10;
  display:none;
  transform:translate(var(--burn-offset-x), var(--burn-offset-y));
  transition:transform 3s ease;
}
#overlay-bar .overlay-inner {
  position:relative; width:100%; height:100%;
}
.overlay-clock {
  display:flex; flex-direction:column; align-items:center;
  position:absolute; padding:16px 24px;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.overlay-clock::before {
  content:''; position:absolute;
  width:200%; height:200%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  pointer-events:none; z-index:-1;
}
.overlay-city {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:calc(clamp(0.7rem,1.5vw,1rem) * var(--scale-city));
  color:var(--clk,#fff); letter-spacing:0.15em; text-transform:uppercase; opacity:0.7;
  white-space:nowrap;
}
.overlay-time {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:calc(var(--ov-time-size, clamp(1.8rem,4vw,3rem)) * var(--scale-time));
  color:var(--clk,#fff); line-height:1; font-variant-numeric:tabular-nums;
}
.overlay-ampm {
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:calc(var(--ov-ampm-size, clamp(0.8rem,1.5vw,1.2rem)) * var(--scale-time));
  color:var(--clk,#fff); opacity:0.7;
}
.overlay-detail {
  font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:calc(var(--ov-detail-size, clamp(0.6rem,1.2vw,0.85rem)) * var(--scale-date));
  color:var(--clk,#fff); opacity:0.5; letter-spacing:0.1em;
}
.overlay-weather {
  font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:calc(var(--ov-detail-size, clamp(0.65rem,1.3vw,0.9rem)) * var(--scale-weather));
  color:var(--clk,#fff); opacity:0.6; margin-top:2px; min-height:1em;
}

/* ── NRL ticker ── */
.nrl-ticker {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:10; display:none;
  padding:16px 24px; font-family:'Barlow Condensed',sans-serif;
  color:#fff; white-space:nowrap;
  flex-direction:column; align-items:center; gap:4px;
  isolation:isolate;
}
.nrl-ticker::before {
  content:''; position:fixed;
  width:400px; height:200px;
  left:50%; bottom:0; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  pointer-events:none; z-index:-1;
}
.nrl-ticker .nrl-row { display:flex; align-items:center; gap:12px; }
.nrl-ticker.visible { display:flex; }
.nrl-teams { display:flex; align-items:center; gap:8px; }
.nrl-team { display:flex; align-items:center; gap:6px; font-weight:600; font-size:clamp(0.85rem,1.8vw,1.1rem); letter-spacing:0.05em; }
.nrl-score { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:clamp(1.1rem,2.2vw,1.5rem); min-width:24px; text-align:center; }
.nrl-vs { opacity:0.4; font-size:0.8rem; letter-spacing:0.1em; }
.nrl-status { font-size:clamp(0.65rem,1.2vw,0.8rem); opacity:0.5; letter-spacing:0.08em; text-transform:uppercase; }
.nrl-live { color:#22c55e; opacity:1; font-weight:700; }

/* ── Alarm overlay ── */
#alarm-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  opacity:0; pointer-events:none;
}
#alarm-overlay.active { opacity:1; pointer-events:auto; }
.alarm-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:1.5rem;
  color:rgba(255,255,255,0.6); letter-spacing:0.2em; text-transform:uppercase;
}
.alarm-time {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:6rem;
  color:#fff; line-height:1;
}
.alarm-buttons { display:flex; gap:20px; margin-top:20px; }
.alarm-btn {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.2rem;
  padding:12px 40px; border-radius:12px; border:2px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.1); color:#fff; cursor:pointer;
  letter-spacing:0.1em; text-transform:uppercase;
}
.alarm-btn:focus { outline:none; box-shadow:0 0 0 3px #3b82f6, 0 0 16px rgba(59,130,246,0.5); transform:scale(1.05); }
.alarm-btn.alarm-dismiss { background:#dc2626; border-color:#dc2626; }

/* Alarm indicator */
.alarm-indicator {
  position:fixed; z-index:15;
  font-family:'Barlow Condensed',sans-serif; font-weight:400;
  font-size:clamp(0.6rem, 1.5vw, 1rem);
  color:rgba(255,255,255,0.6); letter-spacing:0.08em;
  padding:4px 10px; cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}

/* Alarm quick-set overlay */
.alarm-setter {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.8);
}
.alarm-setter-content {
  background:rgba(30,30,30,0.95); border-radius:16px; padding:24px;
  min-width:280px; max-width:90vw; text-align:center;
  font-family:'Barlow Condensed',sans-serif; color:#fff;
}
.alarm-setter .as-city {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem;
  letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; margin-bottom:12px;
}
.alarm-setter .as-time-row {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;
}
.alarm-setter .as-spinner {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.alarm-setter .as-spin-btn {
  width:80px; height:36px; border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08); color:#fff; border-radius:8px;
  font-size:1.2rem; cursor:pointer; font-family:inherit;
}
.alarm-setter .as-spin-btn:hover, .alarm-setter .as-spin-btn:focus {
  background:rgba(255,255,255,0.2); outline:none;
}
.alarm-setter .as-num {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:3rem;
  width:80px; text-align:center; color:#fff; line-height:1.1;
}
.alarm-setter .as-colon {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:3rem;
}
.alarm-setter .as-days {
  display:flex; gap:6px; justify-content:center; margin-bottom:16px;
}
.alarm-setter .as-day {
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3); background:transparent;
  color:rgba(255,255,255,0.6); font-size:0.75rem; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.alarm-setter .as-day.active { background:#0a84ff; border-color:#0a84ff; color:#fff; }
.alarm-setter .as-buttons {
  display:flex; gap:8px; justify-content:center;
}
.alarm-setter .as-btn {
  padding:10px 24px; border-radius:8px; border:none;
  font-family:inherit; font-size:0.9rem; font-weight:600;
  cursor:pointer; letter-spacing:0.05em;
}
.alarm-setter .as-save { background:#0a84ff; color:#fff; }
.alarm-setter .as-cancel { background:rgba(255,255,255,0.1); color:#fff; }

/* Alarm list overlay */
.alarm-list-overlay {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.8);
}
.alarm-list-content {
  background:rgba(30,30,30,0.95); border-radius:16px; padding:20px;
  min-width:280px; max-width:90vw; max-height:80vh; overflow-y:auto;
  font-family:'Barlow Condensed',sans-serif; color:#fff;
}
.alarm-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.1);
}
.alarm-list-item:last-child { border-bottom:none; }
.al-time { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.2rem; }
.al-meta { font-size:0.75rem; color:rgba(255,255,255,0.5); }
.al-countdown { font-size:0.7rem; color:#0a84ff; }
.al-close {
  display:block; text-align:center; margin-top:12px; padding:8px;
  background:rgba(255,255,255,0.1); border-radius:8px; border:none;
  color:#fff; font-family:inherit; font-size:0.85rem; cursor:pointer; width:100%;
}

/* DVD Bounce / Classic mode */
#bounce-clock {
  position:fixed; z-index:20; display:none;
  font-family:'Rajdhani',sans-serif; font-weight:700;
  text-align:center; white-space:nowrap;
  transition:color 0.3s;
  -webkit-user-select:none; user-select:none;
}
#bounce-clock .bounce-time {
  font-size:clamp(3rem, 10vw, 8rem);
  line-height:1; font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
#bounce-clock .bounce-ampm {
  font-size:clamp(1rem, 3vw, 2.5rem);
  opacity:0.7; letter-spacing:0.05em;
}
#bounce-clock .bounce-city {
  font-size:clamp(0.7rem, 2vw, 1.4rem);
  letter-spacing:0.15em; text-transform:uppercase; opacity:0.6;
}
#bounce-clock .bounce-date {
  font-family:'Barlow Condensed',sans-serif; font-weight:400;
  font-size:clamp(0.6rem, 1.5vw, 1rem);
  letter-spacing:0.1em; opacity:0.4;
}

/* Quick action bar */
.action-bar {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:200; display:flex; gap:8px;
  background:rgba(10,10,10,0.85); border:1px solid rgba(255,255,255,0.15);
  border-radius:16px; padding:8px 16px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
  backdrop-filter:blur(8px);
}
.action-bar.visible { opacity:1; pointer-events:auto; }
.action-btn {
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.15);
  color:#fff; font-size:1.2rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-user-select:none; user-select:none; outline:none;
}
.action-btn:focus { border-color:#3b82f6; background:rgba(59,130,246,0.2); box-shadow:0 0 12px rgba(59,130,246,0.4); }
.action-btn:active { background:rgba(255,255,255,0.3); }
.action-info {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  z-index:200; font-family:'Barlow Condensed',sans-serif;
  font-size:0.8rem; color:rgba(255,255,255,0.6); letter-spacing:0.08em;
  background:rgba(10,10,10,0.7); padding:4px 12px; border-radius:8px;
  opacity:0; transition:opacity 0.3s; pointer-events:none;
}

/* ── D-pad focus ── */

/* ── Panel layer ── */
#panel-layer {
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
#panel-layer .panel {
  position:absolute; pointer-events:none;
}

/* ── Overlay full-size cards ── */
.overlay-clock.overlay-full {
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  padding:clamp(8px, 2vw, 20px);
  text-align:center;
}
.overlay-clock.overlay-full .city { font-size:clamp(0.8rem, 2vw, 1.4rem); margin-bottom:4px; }
.overlay-clock.overlay-full .time-digits { font-size:clamp(2rem, 8vw, 6rem); }
.overlay-clock.overlay-full .ampm { font-size:clamp(0.6rem, 1.5vw, 1rem); }
.overlay-clock.overlay-full .separator { margin:4px auto; width:40%; }
.overlay-clock.overlay-full .date-line { font-size:clamp(0.6rem, 1.5vw, 1rem); }
.overlay-clock.overlay-full .day-line { font-size:clamp(0.5rem, 1.2vw, 0.85rem); }
.overlay-clock.overlay-full .weather-line { font-size:clamp(0.5rem, 1.2vw, 0.85rem); }
.overlay-clock.overlay-full .analog-face { width:clamp(80px, 20vw, 250px); height:clamp(80px, 20vw, 250px); margin:8px auto; }

/* ── Per-clock background & border ── */
.overlay-clock.has-background {
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:12px; display:inline-flex;
}
.overlay-clock.has-border {
  border:2px solid rgba(255,255,255,0.3); border-radius:12px;
  display:inline-flex;
}
.overlay-clock.has-background.has-border { border-color:rgba(255,255,255,0.4); }


/* ── Style: Minimal ── */
/* ═══════════════════════════════════════════════════════
   LED 7-segment clock — red glow with ghost segments
   ═══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'DSEG7Classic';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  /* Self-hosted: the old jsdelivr gh path 404'd and CSP blocked the CDN, so the
     LED 7-seg clock silently fell back to monospace. Local copy fixes both. */
  src: url('fonts/DSEG7Classic-Bold.woff2') format('woff2');
}

.led-clock {
  position:relative;
  display:flex; align-items:baseline; justify-content:center; gap:0.1em;
  font-family:'DSEG7Classic', 'Courier New', monospace;
  font-weight:700;
  font-size:calc(var(--ov-time-size, clamp(2.4rem, 8vw, 6rem)) * var(--scale-time));
  letter-spacing:0.05em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.led-clock .led-ghost {
  position:absolute; inset:0;
  display:flex; align-items:baseline; justify-content:center;
  color:rgba(255, 30, 30, 0.10);
  pointer-events:none;
  letter-spacing:0.05em;
  z-index:0;
}
.led-clock .time-digits {
  position:relative; z-index:1;
  font-family:'DSEG7Classic', 'Courier New', monospace;
  letter-spacing:0.05em;
  color:var(--clk,#ff2020);
  text-shadow:
    0 0 6px var(--clk,#ff2020),
    0 0 16px var(--clk,#ff2020),
    0 0 40px var(--clk,#ff2020);
}
.led-clock .time-suffix {
  position:relative; z-index:1; margin-left:0.3em;
  display:flex; flex-direction:column; justify-content:center;
}
.led-clock .ampm {
  font-family:'DSEG7Classic', monospace;
  font-size:0.35em;
  color:var(--clk,#ff2020);
  text-shadow:0 0 4px var(--clk,#ff2020), 0 0 10px var(--clk,#ff2020);
  letter-spacing:0.1em;
  opacity:0.85;
}

/* ═══════════════════════════════════════════════════════
   FLIP CLOCK — split-flap card aesthetic
   ═══════════════════════════════════════════════════════ */
.flip-clock {
  display:flex; align-items:center; justify-content:center; gap:0.2em;
  font-family:'Helvetica Neue', 'Arial', sans-serif;
  font-weight:700;
  font-size:calc(var(--ov-time-size, clamp(2.4rem, 8vw, 6rem)) * var(--scale-time));
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.flip-clock .flip-sep { display:none; }
.flip-clock .flip-card {
  position:relative;
  font-family:'Helvetica Neue', 'Arial', sans-serif;
  font-weight:700;
  padding:0.06em 0.15em 0.08em;
  background:linear-gradient(180deg,
    #2c2c2c 0%,
    #1f1f1f 49%,
    #0a0a0a 50%,
    #181818 51%,
    #232323 100%);
  border-radius:0.08em;
  color:var(--clk,#fff);
  text-shadow:0 2px 3px rgba(0,0,0,0.7);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  min-width:1.3em;
  text-align:center;
}
.flip-clock .flip-card::before {
  content:''; position:absolute; left:0; right:0; top:50%;
  height:2px;
  background:rgba(0,0,0,0.55);
  box-shadow:0 -1px 0 rgba(255,255,255,0.04);
  pointer-events:none; z-index:2;
}
.flip-clock .flip-sep {
  color:#fff; opacity:0.55; padding-bottom:0.05em;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  font-weight:300;
}
.flip-clock .flip-ampm {
  font-size:0.22em; margin-left:0.4em;
  color:var(--clk,#fff); opacity:0.6;
  letter-spacing:0.15em; align-self:center;
}

/* ═══════════════════════════════════════════════════════
   WORD CLOCK — stacked rows of words, active ones glow
   ═══════════════════════════════════════════════════════ */
.word-clock {
  font-family:'Rajdhani', 'Helvetica', sans-serif;
  font-weight:700;
  font-size:calc(var(--ov-time-size, clamp(1rem, 2.5vw, 1.8rem)) * var(--scale-time) * 0.7);
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.5;
  padding:0.5em 0.8em;
}
.word-clock .word-row {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 0.7em;
}
.word-clock .word {
  display:inline-block;
  font-family:'Rajdhani', 'Helvetica', sans-serif;
  font-weight:700;
  color:rgba(255,255,255,0.13);
  transition:color 0.6s ease, text-shadow 0.6s ease;
  text-shadow:none;
}
.word-clock .word.active {
  color:var(--clk,#fff);
  text-shadow:
    0 0 8px rgba(255,255,255,0.45),
    0 0 18px rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════════════════
   OUTLINED — hollow numerals with thin glow
   ═══════════════════════════════════════════════════════ */
/* Outlined style (overlay) — hollow numerals with a thin glow */
.overlay-clock.style-outlined .time-digits,
.overlay-clock.style-outlined .overlay-time {
  color:transparent;
  -webkit-text-stroke:1.5px var(--clk,rgba(255,255,255,0.95));
  text-stroke:1.5px var(--clk,rgba(255,255,255,0.95));
  font-weight:900;
  letter-spacing:0.04em;
  filter:drop-shadow(0 0 14px rgba(255,255,255,0.18));
}
.overlay-clock.style-outlined .ampm {
  color:rgba(255,255,255,0.7);
}

.analog-face {
  position:relative; width:min(80%, 40vh); aspect-ratio:1/1;
  border-radius:50%; margin:0.3em auto;
}
.analog-hand {
  position:absolute; left:50%; bottom:50%;
  transform-origin:50% 100%; transform:translateX(-50%) rotate(0deg);
  border-radius:2px;
}
.analog-center-dot {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:6%; height:6%; border-radius:50%; z-index:3;
}
.analog-marker {
  position:absolute;
}
.analog-numeral {
  position:absolute; font-family:'Barlow Condensed',sans-serif; font-weight:600;
  transform:translate(-50%,-50%); text-align:center;
}

/* ── Analog Modern ── */
.style-analog-modern .analog-face {
  background:#1a1a2e; border:2px solid rgba(255,255,255,0.1);
  box-shadow:0 0 30px rgba(0,0,0,0.5);
}
.style-analog-modern .hour-hand {
  width:4%; height:28%; background:#2ec4b6; z-index:2; border-radius:2px;
}
.style-analog-modern .minute-hand {
  width:2.5%; height:38%; background:#3a86ff; z-index:2; border-radius:2px;
}
.style-analog-modern .second-hand {
  width:1%; height:42%; background:#ff6b6b; z-index:2; border-radius:1px;
}
.style-analog-modern .analog-center-dot { background:#2ec4b6; }
.style-analog-modern .analog-marker {
  background:rgba(255,255,255,0.5); width:2px; height:8%;
}

/* ── Analog Classic ── */
.style-analog-classic .analog-face {
  background:#E8EBE4; border:6px solid #13293D;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.style-analog-classic .hour-hand {
  width:4%; height:25%; background:#13293D; z-index:2; border-radius:2px;
}
.style-analog-classic .minute-hand {
  width:2.5%; height:35%; background:#13293D; z-index:2; border-radius:2px;
}
.style-analog-classic .second-hand {
  width:1%; height:40%; background:#c0392b; z-index:2; border-radius:1px;
}
.style-analog-classic .analog-center-dot { background:#13293D; }
.style-analog-classic .analog-numeral {
  color:#13293D; font-size:10%; font-weight:700; font-family:'Barlow Condensed',sans-serif;
}
.style-analog-classic .city { color:#13293D; }
.style-analog-classic .date-line { color:#13293D; }
.style-analog-classic .day-line { color:#13293D; }
.style-analog-classic .weather-line { color:#13293D; }

/* ── Analog Dark ── */
.style-analog-dark .analog-face {
  background:transparent; border:1px solid rgba(255,255,255,0.15);
}
.style-analog-dark .hour-hand {
  width:3%; height:26%; background:rgba(255,255,255,0.9); z-index:2; border-radius:2px;
}
.style-analog-dark .minute-hand {
  width:2%; height:36%; background:rgba(255,255,255,0.7); z-index:2; border-radius:2px;
}
.style-analog-dark .second-hand {
  width:0.8%; height:42%; background:rgba(255,255,255,0.4); z-index:2; border-radius:1px;
}
.style-analog-dark .analog-center-dot { background:rgba(255,255,255,0.7); }
.style-analog-dark .analog-marker {
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.3);
}

/* ── Analog Numerals (light face, dial ticks, gold sweep) ── */
.style-analog-numerals .analog-face {
  background:#ececec; border:6px solid #333;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.style-analog-numerals .hour-hand { width:4%; height:24%; background:#333; z-index:2; border-radius:3px; }
.style-analog-numerals .minute-hand { width:2.5%; height:34%; background:#555; z-index:2; border-radius:3px; }
.style-analog-numerals .second-hand { width:1.2%; height:42%; background:var(--clk, #e0a800); z-index:2; border-radius:2px; }
.style-analog-numerals .analog-center-dot { background:#333; width:7%; height:7%; box-shadow:0 1px 3px rgba(0,0,0,0.5); }
.style-analog-numerals .analog-marker { background:#888; border-radius:1px; }
.style-analog-numerals .analog-tick-major { background:#555; }
.style-analog-numerals .analog-numeral { color:#333; font-weight:700; font-family:'Barlow Condensed',sans-serif; }

/* ── Analog Seiko (bold bars + chunky hands) ── */
.style-analog-seiko .analog-face {
  background:radial-gradient(circle at 38% 32%, #fbfbf7 0%, #e9e7df 100%);
  border:6px solid #111;
  box-shadow:inset 6px 6px 18px rgba(0,0,0,0.18), 0 6px 22px rgba(0,0,0,0.45);
}
.style-analog-seiko .hour-hand { width:5.5%; height:23%; background:#111; z-index:2; border-radius:4px; }
.style-analog-seiko .minute-hand { width:3.5%; height:34%; background:#111; z-index:2; border-radius:4px; }
.style-analog-seiko .second-hand { width:1.2%; height:40%; background:var(--clk, #d40000); z-index:2; border-radius:2px; }
.style-analog-seiko .analog-center-dot { background:#111; width:9%; height:9%; }
.style-analog-seiko .analog-marker { background:#111; border-radius:1.5px; }

/* ── Overlay analog (smaller) ── */
.overlay-clock .analog-face {
  width:clamp(60px, 8vw, 120px); margin:4px auto;
}
.overlay-clock .analog-hand { border-radius:1px; }
.overlay-clock .analog-center-dot { width:8%; height:8%; }

/* Overlay style classes */
.overlay-clock.style-analog-modern .analog-face { background:#1a1a2e; border:1px solid rgba(255,255,255,0.1); }
.overlay-clock.style-analog-classic .analog-face { background:#E8EBE4; border:3px solid #13293D; }
.overlay-clock.style-analog-dark .analog-face { background:transparent; border:1px solid rgba(255,255,255,0.15); }

.overlay-clock.style-analog-modern .hour-hand { width:4%; height:28%; background:#2ec4b6; }
.overlay-clock.style-analog-modern .minute-hand { width:2.5%; height:38%; background:#3a86ff; }
.overlay-clock.style-analog-modern .second-hand { width:1%; height:42%; background:#ff6b6b; }
.overlay-clock.style-analog-modern .analog-center-dot { background:#2ec4b6; }

.overlay-clock.style-analog-classic .hour-hand { width:4%; height:25%; background:#13293D; }
.overlay-clock.style-analog-classic .minute-hand { width:2.5%; height:35%; background:#13293D; }
.overlay-clock.style-analog-classic .second-hand { width:1%; height:40%; background:#c0392b; }
.overlay-clock.style-analog-classic .analog-center-dot { background:#13293D; }
.overlay-clock.style-analog-classic .overlay-city,
.overlay-clock.style-analog-classic .overlay-time,
.overlay-clock.style-analog-classic .overlay-ampm,
.overlay-clock.style-analog-classic .overlay-detail,
.overlay-clock.style-analog-classic .overlay-weather { color:#13293D; }

.overlay-clock.style-analog-dark .hour-hand { width:3%; height:26%; background:rgba(255,255,255,0.9); }
.overlay-clock.style-analog-dark .minute-hand { width:2%; height:36%; background:rgba(255,255,255,0.7); }
.overlay-clock.style-analog-dark .second-hand { width:0.8%; height:42%; background:rgba(255,255,255,0.4); }
.overlay-clock.style-analog-dark .analog-center-dot { background:rgba(255,255,255,0.7); }

.overlay-clock.style-analog-numerals .analog-face { background:#ececec; border:3px solid #333; box-shadow:0 2px 10px rgba(0,0,0,0.4); }
.overlay-clock.style-analog-numerals .hour-hand { width:4%; height:24%; background:#333; }
.overlay-clock.style-analog-numerals .minute-hand { width:2.5%; height:34%; background:#555; }
.overlay-clock.style-analog-numerals .second-hand { width:1.2%; height:42%; background:var(--clk, #e0a800); }
.overlay-clock.style-analog-numerals .analog-center-dot { background:#333; }

.overlay-clock.style-analog-seiko .analog-face { background:radial-gradient(circle at 38% 32%, #fbfbf7 0%, #e9e7df 100%); border:3px solid #111; box-shadow:inset 3px 3px 10px rgba(0,0,0,0.18), 0 3px 12px rgba(0,0,0,0.45); }
.overlay-clock.style-analog-seiko .hour-hand { width:5.5%; height:23%; background:#111; }
.overlay-clock.style-analog-seiko .minute-hand { width:3.5%; height:34%; background:#111; }
.overlay-clock.style-analog-seiko .second-hand { width:1.2%; height:40%; background:var(--clk, #d40000); }
.overlay-clock.style-analog-seiko .analog-center-dot { background:#111; }

/* ── Night mode dimming ── */
/* Night mode dims visual content but not interactive overlays
   (action bar, alarm setter, alarm overlay etc. stay at full brightness) */
body.night-mode #slideshow,
body.night-mode #panel-layer,
body.night-mode #widget-layer,
body.night-mode #overlay-bar,
body.night-mode #bounce-clock,
body.night-mode .nrl-ticker,
body.night-mode #alarm-indicator {
  filter:brightness(var(--night-dim, 0.3));
}

/* ── Widgets ── */
.tv-widget { font-size:clamp(0.7rem, 1.5vw, 1rem); }
.tv-widget .w-ticker { display:flex; gap:1.5em; overflow:hidden; white-space:nowrap; }
.tv-widget .w-item { opacity:0.8; }
.tv-widget .w-team-score { display:flex; align-items:center; gap:0.5em; justify-content:center; }
.tv-widget .w-team-name { font-weight:600; }
.tv-widget .w-score { font-size:1.4em; font-weight:700; color:var(--accent, #0a84ff); }
.tv-widget .w-scroll { overflow:hidden; white-space:nowrap; width:100%; }
.tv-widget .w-scroll-inner { display:inline-block; animation:widget-scroll 30s linear infinite; }
.tv-widget .w-headline { padding:0 2em; opacity:0.8; }
.tv-widget .w-text { line-height:1.3; max-width:100%; max-height:100%; overflow:hidden; overflow-wrap:break-word; }
@keyframes widget-scroll { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
.tv-widget .w-forecast { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5em; padding:8px 14px; }
.tv-widget .w-forecast::before {
  content:''; position:absolute;
  width:200%; height:200%; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  pointer-events:none; z-index:-1;
}
.tv-widget .w-forecast-label { width:100%; text-align:center; font-size:0.85em; opacity:0.7; font-weight:600; letter-spacing:0.05em; margin-bottom:-0.5em; }
.tv-widget .w-day { text-align:center; }
.tv-widget .w-day-name { font-size:0.75em; opacity:0.6; font-weight:600; letter-spacing:0.05em; }
.tv-widget .w-day-icon { font-size:1.8em; line-height:1.2; }
.tv-widget .w-day-temp { font-size:0.7em; opacity:0.7; }

/* LED Scroller widget */
.tv-widget .w-led {
  width:100%; overflow:hidden; white-space:nowrap;
  font-family:'Courier New', monospace;
  font-weight:900;
  font-size:clamp(1.4rem, 4vw, 3.5rem);
  letter-spacing:0.06em;
  color:var(--led-color, #ff3030);
  padding:8px 0;
  line-height:1;
}
.tv-widget .w-led .w-led-text {
  display:inline-block;
  padding-left:100%;
  animation:led-scroll var(--led-speed, 15s) linear infinite;
  text-transform:uppercase;
}
@keyframes led-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}
/* LED dots: two layered radial-gradients give a subtle dot-matrix look */
.tv-widget .w-led.led-style .w-led-text {
  text-shadow:0 0 6px currentColor, 0 0 14px currentColor;
}
.tv-widget .w-led.led-style {
  background-image:radial-gradient(circle at center, rgba(0,0,0,0.55) 35%, transparent 36%);
  background-size:6px 6px;
}
.tv-widget .w-led.led-glow .w-led-text {
  text-shadow:0 0 8px currentColor, 0 0 18px currentColor, 0 0 30px currentColor;
}
.tv-widget .w-led.led-plain .w-led-text { text-shadow:none; }

/* Quote widgets (inspiration / bible) — text card with attribution */
.tv-widget .w-quote {
  position:relative;
  display:flex; flex-direction:column; justify-content:center; padding:0.6em 0.9em;
  max-width:100%; max-height:100%;
  font-family:Georgia, 'Times New Roman', serif;
  line-height:1.4;
  /* Soft legibility glow as a BACKGROUND (drawn larger than the box via
     background-size) — not an oversized absolutely-positioned ::before, which
     would inflate scrollWidth/scrollHeight and break fit-to-box sizing. */
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  background-size:200% 200%; background-position:center; background-repeat:no-repeat;
}
.tv-widget .w-quote-text {
  font-size:1em; /* driven by fit-to-box (font-size set on the widget box) */
  font-style:italic; color:#fff; opacity:0.95;
  overflow-wrap:break-word;
}
.tv-widget .w-quote-attr {
  margin-top:6px; align-self:flex-end;
  font-size:0.78em; opacity:0.65;
  font-family:'Rajdhani',sans-serif; font-weight:600;
  letter-spacing:0.05em;
}

/* Sports widget (NRL/AFL) — single team card */
.tv-widget .w-sports { position:relative; display:flex; flex-direction:column; align-items:center; padding:8px 14px; line-height:1.3; }
.tv-widget .w-sports::before {
  content:''; position:absolute;
  width:200%; height:200%; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  pointer-events:none; z-index:-1;
}
.tv-widget .w-sports-status { font-size:0.7em; opacity:0.6; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px; }
.tv-widget .w-sports .w-team-score { display:flex; align-items:center; gap:0.6em; margin:2px 0; }
.tv-widget .w-sports .w-team-name { font-weight:600; font-size:1em; opacity:0.9; }
.tv-widget .w-sports .w-score { font-size:1.4em; font-weight:700; color:var(--accent, #0a84ff); font-variant-numeric:tabular-nums; }
.tv-widget .w-sports-meta { font-size:0.75em; opacity:0.6; margin-top:4px; text-align:center; }

/* Simple month calendar — matches clock transparent + radial fade aesthetic */
.tv-widget .w-cal {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 22px;
  font-family:'Rajdhani',sans-serif; color:#fff;
}
.tv-widget .w-cal::before {
  content:''; position:absolute;
  width:200%; height:200%; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 35%, transparent 70%);
  pointer-events:none; z-index:-1;
}
.tv-widget .w-cal-head {
  font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  font-size:1.1em; opacity:0.85; margin-bottom:8px;
}
.tv-widget .w-cal-grid {
  display:grid; grid-template-columns:repeat(7, 1.6em);
  gap:2px 4px; line-height:1;
}
.tv-widget .w-cal-dows > div {
  text-align:center; font-size:0.65em; font-weight:700;
  opacity:0.5; letter-spacing:0.1em;
  padding:2px 0;
}
.tv-widget .w-cal-cells .cal-cell {
  text-align:center; font-size:0.85em; font-weight:500;
  padding:3px 0; opacity:0.85; font-variant-numeric:tabular-nums;
}
.tv-widget .w-cal-cells .cal-pad { opacity:0; }
.tv-widget .w-cal-cells .cal-today {
  background:rgba(255,255,255,0.18);
  border-radius:50%;
  font-weight:700; opacity:1;
  box-shadow:0 0 0 1px rgba(255,255,255,0.25) inset;
}