/* ---------- Pi Clock base layout. Themes override variables in /themes/*.css ---------- */
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: block; }
@font-face { font-family: "Varela Round"; src: url("/fonts/VarelaRound-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Share Tech Mono"; src: url("/fonts/ShareTechMono-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "VT323"; src: url("/fonts/VT323-Regular.ttf") format("truetype"); font-display: block; }

:root {
  --bg: #05070d;
  --bg2: #0b1222;
  --fg: #e8eefc;
  --muted: #8a97b3;
  --accent: #3d8bff;
  --accent2: #7fb2ff;
  --up: #2fd47a;
  --down: #ff5a5f;
  --time-color: var(--accent);
  --glow: none;
  --font-time: "Nunito", system-ui, sans-serif;
  --font-ui: "Nunito", system-ui, sans-serif;
  --time-weight: 800;
  --ui-weight: 700;
  --time-size: min(42vh, 23vw);
  --time-spacing: -0.02em;
  --label-transform: uppercase;
  --label-spacing: 0.18em;
  --panel-bg: transparent;
  --panel-border: none;
  --panel-radius: 0;
  --menu-bg: rgba(12, 18, 32, 0.96);
  --menu-fg: var(--fg);
  --menu-active: var(--accent);
  --fade: 1.2s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  color: var(--fg); font-family: var(--font-ui); font-weight: var(--ui-weight);
  cursor: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.show-cursor { cursor: default; }
#stage { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, var(--bg2), var(--bg) 70%); }

.slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--fade) ease; pointer-events: none; padding: 6vh 6vw;
}
.slide.active { opacity: 1; }
.drift { transition: transform 6s ease-in-out; text-align: center; max-width: 100%;
  background: var(--panel-bg); border: var(--panel-border); border-radius: var(--panel-radius); }

/* Clock slide */
.time { display: flex; align-items: center; justify-content: center; line-height: 0.9;
  font-family: var(--font-time); font-weight: var(--time-weight); color: var(--time-color);
  font-size: var(--time-size); letter-spacing: var(--time-spacing); text-shadow: var(--glow);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ampm-wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  margin-left: 0.12em; gap: 0.08em; }
.ampm, .sec { font-size: 0.22em; line-height: 1; letter-spacing: 0.04em; }
.sec { color: var(--muted); font-variant-numeric: tabular-nums; }
.date { margin-top: 5vh; font-size: min(7.5vh, 4.4vw); color: var(--fg); white-space: nowrap; }
.weekday { color: var(--accent2); }
.dot { color: var(--muted); margin: 0 0.5em; }

/* Labels */
.label { font-size: min(5.6vh, 3.4vw); color: var(--muted); text-transform: var(--label-transform);
  letter-spacing: var(--label-spacing); margin-bottom: 3vh; }
.pair { color: var(--muted); opacity: 0.75; margin-left: 0.6em; }
.btc-logo { color: #f7931a; }

/* Bitcoin slide */
.price { font-family: var(--font-time); font-weight: var(--time-weight); color: var(--fg);
  font-size: min(24vh, 13vw); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: var(--glow);
  white-space: nowrap; transition: color 0.5s; }
.price.tick-up { color: var(--up); } .price.tick-down { color: var(--down); }
.btc-row { margin-top: 3vh; display: flex; gap: 4vw; justify-content: center; align-items: baseline; }
.chg { font-size: min(8vh, 5vw); font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); }
.rng { font-size: min(5vh, 3vw); color: var(--muted); font-variant-numeric: tabular-nums; }
#b-spark { display: block; width: min(70vw, 120vh); height: 13vh; margin: 3vh auto 0; overflow: visible; }
#b-line { fill: none; stroke: var(--accent); stroke-width: 2.2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
#b-spark.up #b-line { stroke: var(--up); } #b-spark.down #b-line { stroke: var(--down); }
.status { margin-top: 2.5vh; font-size: min(4vh, 2.5vw); color: var(--muted); display: flex; gap: 0.6em;
  justify-content: center; align-items: center; }
.live-dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--muted); }
.live-dot.live { background: var(--up); box-shadow: 0 0 0.6em var(--up); }
.live-dot.poll { background: #f5b942; }
.live-dot.stale { background: var(--down); }

/* News slide */
#s-news .drift { width: 86vw; }
.headline { font-size: min(9.5vh, 5.6vw); line-height: 1.22; color: var(--fg); transition: opacity 0.6s;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.headline.out, .source.out { opacity: 0; }
.source { margin-top: 4vh; font-size: min(6vh, 3.6vw); color: var(--accent2); transition: opacity 0.6s; }

/* Persistent mini clock */
.mini { position: absolute; top: 4vh; right: 4vw; font-family: var(--font-time); font-weight: var(--time-weight);
  font-size: min(9vh, 5.4vw); color: var(--time-color); opacity: 0; transition: opacity var(--fade), transform 6s ease-in-out;
  text-shadow: var(--glow); font-variant-numeric: tabular-nums; line-height: 1; }
.mini.on { opacity: 0.9; }
.mini-ampm { font-size: 0.45em; margin-left: 0.15em; color: var(--muted); }

/* Slide dots */
.dots { position: absolute; bottom: 3.5vh; left: 0; right: 0; display: flex; gap: 1.4vw; justify-content: center; }
.dots i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--muted); opacity: 0.35; transition: opacity 0.6s, background 0.6s; }
.dots i.on { opacity: 0.9; background: var(--accent); }

/* Night dim overlay */
#dim { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 30s linear; z-index: 50; }
body.night #dim { opacity: 0.6; }

/* Theme menu */
#theme-menu { position: fixed; top: 0; left: 50%; z-index: 100; transform: translate(-50%, -110%);
  transition: transform 0.35s ease; background: var(--menu-bg); color: var(--menu-fg);
  border-radius: 0 0 2.4vh 2.4vh; padding: 1.6vh 2vw 2vh; box-shadow: 0 1vh 4vh rgba(0,0,0,0.6);
  font-family: "Nunito", system-ui, sans-serif; font-weight: 700; width: 94vw; max-width: 1400px; }
#theme-menu.open { transform: translate(-50%, 0); }
#theme-menu .mt { font-size: min(3.6vh, 2.2vw); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.6; text-align: center; margin-bottom: 1.2vh; }
#theme-menu .opts { display: flex; gap: 1.2vw; justify-content: center; flex-wrap: wrap; }
#theme-menu button { font: inherit; font-size: min(4.4vh, 2.7vw); color: inherit; background: rgba(255,255,255,0.06);
  border: 0.35vh solid rgba(255,255,255,0.12); border-radius: 1.6vh; padding: 1.4vh 1.8vw; cursor: pointer;
  display: flex; align-items: center; gap: 0.6em; }
#theme-menu button .sw { width: 1em; height: 1em; border-radius: 0.3em; display: inline-block; border: 1px solid rgba(255,255,255,0.3); }
#theme-menu button.on { border-color: var(--menu-active); background: rgba(255,255,255,0.12); }

/* ---------- optional decorative layers: hidden by default, themes switch them on ---------- */
.fx-grid, .frame, .fx-scan, .fx-vig { display: none; pointer-events: none; }
.fx-grid { position: absolute; inset: 0; }
.frame { position: absolute; inset: 3vh 2.5vw; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: var(--frame-radius, 0); }
.cb { position: absolute; width: 4vh; height: 4vh; border: 0 solid var(--accent); }
.cb.tl { top: -1px; left: -1px; border-width: 0.45vh 0 0 0.45vh; border-top-left-radius: var(--frame-radius, 0); }
.cb.tr { top: -1px; right: -1px; border-width: 0.45vh 0.45vh 0 0; border-top-right-radius: var(--frame-radius, 0); }
.cb.bl { bottom: -1px; left: -1px; border-width: 0 0 0.45vh 0.45vh; border-bottom-left-radius: var(--frame-radius, 0); }
.cb.br { bottom: -1px; right: -1px; border-width: 0 0.45vh 0.45vh 0; border-bottom-right-radius: var(--frame-radius, 0); }
.hud-tag { position: absolute; font-size: min(3.4vh, 2vw); letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; opacity: 0.85; }
.hud-tl { top: 2vh; left: 2.5vw; } .hud-br { bottom: 2vh; right: 2.5vw; color: var(--muted); }
.fx-scan { position: fixed; inset: 0; z-index: 40; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); }
.fx-vig { position: fixed; inset: 0; z-index: 41; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
html.has-grid .fx-grid, html.has-frame .frame, html.has-scan .fx-scan, html.has-vig .fx-vig { display: block; }
#theme-menu .mt2 { margin-top: 2vh; }
#theme-menu button { min-height: 9vh; }
#theme-menu .opts.timer button { min-width: 11vw; justify-content: center; font-size: min(5vh, 3vw); }
.dots.paused::after { content: "❚❚"; color: var(--accent); font-size: 1.8vh; line-height: 1.4vh; margin-left: 1vw; opacity: 0.8; }
#theme-menu .opts { flex-wrap: wrap; gap: 1.4vh 1vw; }
#theme-menu .opts button { flex: 1 1 0; justify-content: center; white-space: nowrap; }
#theme-menu .opts:not(.timer) button { font-size: min(4.6vh, 2.6vw); }