/* =========================================================
   TokenCast — Halaman tampilan
   Warna & font diisi oleh display.js dari template desain
   ========================================================= */
:root {
  --bg: linear-gradient(135deg, #0f172a, #1e3a8a);
  --solid: #0f172a;
  --fg: #f8fafc;
  --accent: #38bdf8;
  --muted: #94a3b8;
  --card: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .16);
  --on: #0f172a;
  --font: system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 48px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--solid);
  background-image: var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .6s ease, color .6s ease;
}
button { font: inherit; color: inherit; }

#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---------- Header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 2vh, 24px) var(--gutter);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: .02em;
  min-width: 0;
}
.brand #title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: ping 2s infinite;
  flex: none;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  80%, 100% { box-shadow: 0 0 0 .6em transparent; }
}
.clock { text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.clock span { display: block; font-size: clamp(1.1rem, 2.4vw, 2rem); font-weight: 700; }
.clock small { color: var(--muted); font-size: clamp(.7rem, 1.1vw, .95rem); }

/* ---------- Area utama ---------- */
.stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  padding: 0 var(--gutter) var(--gutter);
}
.panel {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 4vh, 48px);
}
.label {
  font-size: clamp(.75rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--accent);
  margin-bottom: .6em;
}
.token-box { min-width: 0; max-width: 100%; }
.token-wrap { width: 100%; }
/* Ukuran tulisan token TETAP (diatur admin, satuan vmin = % sisi layar terpendek).
   Bila terlalu panjang, token otomatis turun ke baris berikutnya di sela spasi. */
.token {
  font-size: var(--token-size, 18vmin);
  font-weight: 700;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.token.empty { color: var(--muted); font-weight: 400; font-size: calc(var(--token-size, 18vmin) * .45); }
.token-meta { display: flex; align-items: center; gap: 14px; margin-top: 1em; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: .9rem;
}
.chip:hover { border-color: var(--accent); }
.updated { color: var(--muted); font-size: clamp(.8rem, 1.2vw, 1rem); }

/* Kolom samping (hanya tata letak Dua Kolom) */
.side-box { display: none; }
.side-clock { font-size: clamp(3rem, 9vw, 9rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.side-date { color: var(--muted); font-size: clamp(1rem, 2vw, 1.8rem); margin-top: .4em; }

/* ---------- Layout: Tengah ---------- */
body[data-layout="center"] .panel { align-items: center; text-align: center; }
body[data-layout="center"] .token-box { width: 100%; max-width: 1500px; }
body[data-layout="center"] .token-meta { justify-content: center; }

/* ---------- Layout: Dua Kolom (token | jam besar) ---------- */
body[data-layout="split"] .panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}
body[data-layout="split"] .side-box {
  display: block;
  border-left: 3px solid var(--accent);
  padding-left: clamp(16px, 3vw, 48px);
}
body[data-layout="split"] .top .clock { visibility: hidden; }

/* ---------- Layout: Kartu Kaca ---------- */
body[data-layout="card"] .stage { align-items: center; justify-content: center; }
body[data-layout="card"] .panel {
  flex: 0 1 1300px;
  max-height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(16px, 2vw, 32px);
  padding: clamp(28px, 6vw, 96px) clamp(20px, 4vw, 64px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  text-align: center;
}
body[data-layout="card"] .token-meta { justify-content: center; }

/* ---------- Layout: Teks Berjalan ---------- */
body[data-layout="ticker"] .panel { align-items: center; text-align: center; }
body[data-layout="ticker"] .token-box { width: 100%; }
body[data-layout="ticker"] .token-meta { justify-content: center; }

/* ---------- Layout: Header Bar ---------- */
body[data-layout="header"] .top { background: var(--accent); color: var(--on); }
body[data-layout="header"] .top .clock small { color: inherit; opacity: .75; }
body[data-layout="header"] .dot { background: var(--on); }
body[data-layout="header"] .stage { padding-top: var(--gutter); }
body[data-layout="header"] .token-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--accent);
  border-radius: 16px;
  padding: clamp(24px, 5vw, 72px) clamp(16px, 3vw, 48px);
}

/* ---------- Teks berjalan pengingat informasi ---------- */
.ticker {
  display: flex; align-items: stretch;
  background: var(--lv, var(--accent)); color: #fff;
  font-size: clamp(1.1rem, 2.6vw, 2.2rem); font-weight: 700;
  white-space: nowrap; overflow: hidden;
}
.ticker[hidden] { display: none; }
.ticker-tag {
  flex: none; display: flex; align-items: center; padding: 0 .9em;
  background: rgba(0, 0, 0, .28); letter-spacing: .12em; font-size: .7em;
}
.ticker-clip { flex: 1; overflow: hidden; padding: .45em 0; }
.ticker-track { display: inline-block; padding-left: 100%; animation: marquee var(--ticker-dur, 30s) linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* =========================================================
   POP-UP INFORMASI / PERINGATAN
   Warna tetap per level agar selalu terbaca di desain apa pun
   ========================================================= */
.alert-layer, .info-pin, .ticker { --lv: #d97706; --lv-soft: #fffbeb; --lv-ink: #78350f; }
[data-level="info"]   { --lv: #2563eb; --lv-soft: #eff6ff; --lv-ink: #1e3a8a; }
[data-level="warning"]{ --lv: #d97706; --lv-soft: #fffbeb; --lv-ink: #78350f; }
[data-level="danger"] { --lv: #dc2626; --lv-soft: #fef2f2; --lv-ink: #7f1d1d; }

.alert-layer {
  position: fixed; inset: 0; z-index: 60;
  display: flex;
  background: var(--lv);
  animation: tc-fadeIn .35s ease-out both;
}
.alert-layer[hidden] { display: none; }
/* Pop-up informasi LAYAR PENUH */
.alert-card {
  flex: 1;
  width: 100vw; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--lv-soft); color: var(--lv-ink);
  font-family: var(--font);
  box-shadow: inset 0 0 0 clamp(6px, 1vmin, 14px) var(--lv);
}
[data-level="danger"] .alert-card { animation-name: alert-danger; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes alert-danger {
  0%, 100% { box-shadow: inset 0 0 0 clamp(6px, 1vmin, 14px) var(--lv); }
  50% { box-shadow: inset 0 0 0 clamp(14px, 3vmin, 36px) var(--lv); }
}
.alert-head {
  flex: none;
  display: flex; align-items: center; gap: clamp(12px, 2vmin, 28px);
  padding: clamp(12px, 2.4vmin, 32px) clamp(16px, 4vmin, 56px);
  background: var(--lv); color: #fff;
}
.alert-icon {
  flex: none; display: grid; place-items: center;
  width: clamp(44px, 9vmin, 110px); height: clamp(44px, 9vmin, 110px);
  border-radius: 50%; background: #fff; color: var(--lv);
  font: 900 clamp(1.4rem, 5vmin, 4rem)/1 system-ui, sans-serif;
  animation: alert-icon 1.6s ease-in-out infinite;
}
@keyframes alert-icon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.alert-titles { flex: 1; min-width: 0; }
.alert-kind { font-weight: 800; letter-spacing: .14em; font-size: clamp(1.3rem, 6vmin, 4.4rem); line-height: 1.05; }
.alert-time { opacity: .9; font-size: clamp(.85rem, 2.2vmin, 1.6rem); margin-top: 4px; }
.alert-close {
  flex: none; width: clamp(44px, 7vmin, 80px); height: clamp(44px, 7vmin, 80px); border-radius: 14px;
  border: 0; background: rgba(255, 255, 255, .22); color: #fff;
  font-size: clamp(1.8rem, 5vmin, 3.4rem); line-height: 1; cursor: pointer;
}
.alert-close:hover { background: rgba(255, 255, 255, .38); }
.alert-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: clamp(18px, 4vmin, 64px) clamp(20px, 6vmin, 96px);
}
/* margin auto: teks pendek di tengah layar, teks panjang mulai dari atas lalu digulir otomatis */
.alert-text {
  margin: auto 0;
  text-align: center;
  font-size: var(--info-size, 7vmin);
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.alert-progress { flex: none; height: clamp(6px, 1.2vmin, 14px); background: rgba(15, 23, 42, .1); }
.alert-progress i { display: block; height: 100%; width: 100%; background: var(--lv); transform-origin: left; }
.alert-progress.running i { animation: alert-countdown var(--alert-dur, 30s) linear forwards; }
.alert-progress.off { display: none; }
@keyframes alert-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Tombol pengingat informasi (muncul setelah pop-up ditutup) */
.info-pin {
  position: fixed; left: 16px; bottom: 16px; z-index: 41;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  height: 44px; padding: 0 16px 0 6px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lv); color: #fff; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: pin-pulse 2.4s ease-in-out infinite;
}
.info-pin[hidden] { display: none; }
.info-pin #pinText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-icon { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--lv); display: grid; place-items: center; font-weight: 900; flex: none; }
@keyframes pin-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 var(--lv); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 8px transparent; } }

/* ---------- Efek ---------- */
body[data-effect="glow"] .token { text-shadow: 0 0 .25em color-mix(in srgb, var(--accent) 65%, transparent); }
body[data-effect="glow"] .label { text-shadow: 0 0 12px var(--accent); }
body[data-effect="animated"] { background-size: 300% 300%; animation: bgmove 18s ease infinite; }
@keyframes bgmove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
body[data-effect="stars"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 80%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 65%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 10% 90%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 50%, #fff 50%, transparent 51%);
  background-size: 420px 420px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: .7; } }
body[data-effect="scanline"] .token,
body[data-effect="scanline"] .info { text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
body[data-effect="scanline"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px);
}

/* ---------- Animasi update ---------- */
.bump { animation: bump 1.2s ease; }
@keyframes bump {
  0% { transform: scale(.92); opacity: .2; }
  40% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.flash-overlay {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  box-shadow: inset 0 0 0 0 var(--accent);
  opacity: 0;
}
.flash-overlay span {
  margin-top: 12vh;
  background: var(--flash-bg, var(--accent)); color: var(--flash-ink, var(--on));
  font-weight: 800; letter-spacing: .25em;
  padding: .6em 1.4em; border-radius: 999px;
  font-size: clamp(.9rem, 2vw, 1.4rem);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.flash-overlay.on { animation: flash 3.2s ease forwards; }
@keyframes flash {
  0% { opacity: 0; box-shadow: inset 0 0 0 0 var(--accent); }
  10% { opacity: 1; box-shadow: inset 0 0 0 10px var(--accent); }
  80% { opacity: 1; box-shadow: inset 0 0 0 4px var(--accent); }
  100% { opacity: 0; box-shadow: inset 0 0 0 0 var(--accent); }
}

/* ---------- Kontrol ---------- */
.controls {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  transition: opacity .4s ease, transform .4s ease;
}
body.has-ticker .controls, body.has-ticker .info-pin { bottom: calc(16px + 4.2rem); }
.controls.idle { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ctl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--solid) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.ctl:hover { border-color: var(--accent); }
.ctl svg { width: 20px; height: 20px; }
.ctl .ic-off { display: none; }
.ctl.muted .ic-on { display: none; }
.ctl.muted .ic-off { display: inline; }
.ctl.muted { opacity: .7; }
.ctl-label { font-size: .85rem; }
.status { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(0,0,0,.2); }
.status.err { background: #ef4444; }

.unlock {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.25);
}
.unlock[hidden] { display: none; }
.unlock button {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  max-width: 460px; width: 100%;
  padding: 18px 22px; border-radius: 16px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on);
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.unlock strong { font-size: 1.1rem; }
.unlock small { opacity: .8; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 45;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--fg); color: var(--solid);
  padding: 10px 18px; border-radius: 10px; font-size: .9rem;
  transition: all .3s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Penyewa nonaktif ---------- */
.blocked { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; }
.blocked-box { max-width: 460px; text-align: center; }
.blocked-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #ef4444; color: #fff; font-size: 2rem; font-weight: 800; }
.blocked h1 { margin: 0 0 8px; }
.blocked p { color: #94a3b8; }

/* ---------- Layar kecil ---------- */
@media (max-width: 760px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100dvh; }
  body[data-layout="split"] .panel { grid-template-columns: 1fr; }
  body[data-layout="split"] .side-box { border-left: 0; padding-left: 0; border-top: 3px solid var(--accent); padding-top: 16px; }
  body[data-layout="split"] .top .clock { visibility: visible; }
  .info-pin { right: 16px; bottom: 76px; max-width: none; }
  .ctl-label { display: none; }
  .stage { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ticker-track { animation: none !important; padding: 0 var(--gutter); white-space: normal; }
}