/* ═══════════════════════════════════════════════════════════════
   Truth Pixel — глобальна основа (підключена у кожному міні-апі)
   Сірий · синій · білий, піксельний ретро / arcade.
   Тут: токени, reset, піксельний фон (сплошний + рельєф), ambient.
   ═══════════════════════════════════════════════════════════════ */

@import "truth-relief-vars.css";

@font-face {
  font-family: "Digital Thin";
  src: url("fonts/digital-thin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lorem";
  src: url("fonts/lorem.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-ukraine-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-ukraine-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-ukraine-medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-ukraine-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("fonts/e-ukraine-bold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Pixel palette ── */
  --px-bg: #1a1a1a;
  --px-bg-deep: #000000;
  --px-panel: #2a2420;
  --px-panel-light: #4a3a30;
  --px-border: #6f4e43;
  --px-border-dark: #1a1410;
  --px-blue: #c9956e;
  --px-blue-deep: #6f4e43;
  --px-blue-sky: #e2b88a;
  --px-gold: #e2d3b8;
  --px-gold-hot: #e2b88a;
  --px-gold-dim: #c9956e;
  --px-accent-border: #e7dcc8;
  --px-white: #e7dcc8;
  --px-cream: #e7dcc8;
  --px-star: #e2b88a;
  --px-star-dim: #c9956e;
  --px-text: #e7dcc8;
  --px-text-dim: #e2d6c0;
  --px-on-panel: #e7dcc8;
  --px-on-panel-dim: #d0c0a4;
  --px-shadow: #000000;
  --robot-bg-a: #000000;
  --robot-bg-b: #15100c;
  --px-site-bg: #15100c;

  --px-font-heading: "Digital Thin", "Lorem", system-ui, sans-serif;
  --px-font-ui: "e-Ukraine", system-ui, -apple-system, sans-serif;
  --px-font-body: "e-Ukraine", system-ui, -apple-system, sans-serif;
  --px-heading-tracking: 0.14em;
  --px-heading-tracking-mixed: 0.1em;
  --px-ui-weight: 700;
  --px-ui-tracking: 0.04em;
  --px-text-shadow-ui: 1px 1px 0 var(--px-shadow);

  /* ── Legacy tokens, перенаправлені на піксельну палітру ──
     (увесь старий код, що використовує var(--truth-*), стане синім автоматично) */
  --truth-bg:                #000000;
  --truth-primary-dark:      #2a2420;
  --truth-accent-gold:       #e2d3b8;
  --truth-accent-red:        #ffb4b4;
  --truth-text-light:        #e7dcc8;
  --truth-text-beige:        #c9b89a;
  --truth-border-red:        #6f4e43;
  --truth-border-dark:       #1a1410;
  --m-bg-panel:              #2a2420;
  --muted:                   #d8c7aa;

  /* Owner — синій акцент */
  --truth-owner-blue:           #c9956e;
  --truth-owner-blue-soft:      #e2b88a;
  --truth-owner-blue-deep:      #6f4e43;
  --truth-owner-blue-highlight: #e2b88a;
  --truth-owner-blue-border:    rgba(201, 149, 110, 0.5);

  /* Ambient glow → пікс-зорі */
  --glow-gold:  rgba(231, 162, 122, 0.55);
  --glow-ember: rgba(201, 149, 110, 0.45);
  --glow-copper: rgba(45, 45, 45, 0.5);

  /* Premium — фіолетовий акцент (єдиний спецтон) */
  --truth-premium-deep: #4a3d6b;
  --truth-premium: #9b7fd4;
  --truth-premium-light: #d4c4f0;
  --truth-premium-soft: #c9b8e8;
  --truth-premium-border: rgba(155, 127, 212, 0.55);
  --truth-premium-glow: rgba(155, 127, 212, 0.18);

  /* Safe areas / layout */
  --tg-content-safe-top:    env(safe-area-inset-top, 0px);
  --tg-content-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-content-safe-left:   env(safe-area-inset-left, 0px);
  --tg-content-safe-right:  env(safe-area-inset-right, 0px);
  --app-height:              100dvh;

  --truth-header-title-size: 28px;
  --truth-header-title-line: 1.25;
  --truth-list-gap: 14px;
  --truth-page-gap: 12px;
  --truth-card-gap: 10px;
  --truth-panel-pad: 14px;
}

@media (max-width: 420px) {
  :root {
    --truth-header-title-size: 14px;
  }
}

/* ── Reset: жодних скруглень у всій темі ── */
*, *::before, *::after {
  border-radius: 0 !important;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Усі SVG — чіткі піксельні краї (без згладжування) */
svg {
  shape-rendering: crispEdges;
}
.truth-icon__svg,
.px-icon {
  shape-rendering: crispEdges;
  image-rendering: pixelated;
}

html, body {
  position: relative;
  background: var(--px-site-bg);
  color: var(--px-text);
}

/* ── Сплошний фон + випадкові піксельні квадратики (як на плитках) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: var(--px-site-bg, #15100c);
  background-image:
    var(--px-relief-1),
    var(--px-relief-3),
    var(--px-relief-5);
  background-repeat: repeat, repeat, repeat;
  background-size: 320px 240px, 320px 240px, 320px 240px;
  background-position: 0 0, 74px 38px, 142px 106px;
  opacity: 0.92;
  image-rendering: pixelated;
}

/* Зірки вимкнено — фон як на плитках */
body::after {
  content: none;
}

.ambient-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Орби з минулої теми вимкнено — піксельна тема не використовує blur */
.ambient-orb { display: none !important; }

/* ── Піксельні іскри ── */
.ambient-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--px-star);
  box-shadow:
    0 0 0 1px rgba(231, 162, 122, 0.4),
    -4px 0 0 var(--px-star),
    4px 0 0 var(--px-star),
    0 -4px 0 var(--px-star),
    0 4px 0 var(--px-star);
  opacity: 0;
  animation: ambient-spark 4.5s steps(2, end) infinite;
}

.ambient-spark-1 { left: 14%; top: 28%; animation-delay: 0s; }
.ambient-spark-2 { left: 78%; top: 22%; animation-delay: 1.2s; }
.ambient-spark-3 { left: 62%; top: 72%; animation-delay: 2.4s; }
.ambient-spark-4 { left: 24%; top: 68%; animation-delay: 3.1s; }

.sky-star {
  position: absolute;
  pointer-events: none;
  animation: sky-star-twinkle 3s steps(2, end) infinite alternate;
}

/* ── Header underline → піксельна акцентна смужка в truth-blocks.css ── */
.site-header { position: relative; }

/* ── Glow-хуки → пласкі піксельні тіні (без blur) ── */
.truth-glow-title,
.site-header h1.truth-glow-title--premium {
  animation: none !important;
  text-shadow: 2px 2px 0 var(--px-shadow);
}
.site-header h1.truth-glow-title--premium { color: var(--truth-premium-soft); }

.section-head-glow { text-shadow: 2px 2px 0 var(--px-shadow); }
.section-head-glow::before {
  content: '✦';
  margin-right: 6px;
  font-size: 0.55rem;
  color: var(--px-gold);
  opacity: 0.9;
  animation: px-blink 1.5s steps(2, end) infinite;
}

.entry-glow-wrap { position: relative; z-index: 1; }
.entry-glow-wrap::before { content: none !important; }

/* ── Card strip — піксельний градієнт у truth-blocks.css ── */

/* ── Premium-акценти (піксельні) ── */
.hub-card--premium,
.hub-card--diamond {
  border-color: var(--truth-premium-border);
}
.hub-card--premium .hub-card-strip,
.hub-card--diamond .hub-card-strip {
  background: var(--px-accent-strip-premium, var(--truth-premium));
}
.hub-card--premium .hub-card-icon,
.hub-card--diamond .hub-card-icon {
  color: var(--truth-premium-soft);
  border-color: var(--truth-premium-border);
  background: var(--truth-premium-deep);
}
.hub-card-tag {
  color: var(--truth-premium-soft);
  background: var(--truth-premium-deep);
  border-color: var(--truth-premium-border);
}
.hub-group--premium .hub-group-title { color: var(--truth-premium-soft); }
.card.is-premium { border-color: var(--truth-premium-border); }
.card.is-premium .card-strip { background: var(--px-accent-strip-premium, var(--truth-premium)); }
.status-pill.is-premium {
  color: var(--truth-premium-soft);
  border-color: var(--truth-premium-border);
  background: var(--truth-premium-deep);
}
.card.is-premium .toggle.is-on {
  background: var(--truth-premium-deep);
  border-color: var(--truth-premium-border);
}
.card.is-premium .toggle.is-on::after { background: var(--truth-premium-soft); }
.card.is-premium .cycle-btn {
  border-color: var(--truth-premium-border);
  background: var(--truth-premium-deep);
  color: var(--truth-premium-soft);
}
.card.is-premium .status-pill.is-on {
  color: var(--truth-premium-soft);
  border-color: var(--truth-premium-border);
  background: var(--truth-premium-deep);
}

/* ── Animations ── */
@keyframes ambient-spark {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
  70% { opacity: 0; }
}
@keyframes night-stars-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.55; }
}
@keyframes sky-star-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.92); }
}
@keyframes px-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Telegram на телефоні / прихована сторінка: без анімацій ── */
html.truth-mobile-perf body::after,
html.truth-page-hidden body::after,
html.truth-mobile-perf .ambient-spark,
html.truth-page-hidden .ambient-spark,
html.truth-mobile-perf .sky-star,
html.truth-page-hidden .sky-star,
html.truth-mobile-perf .section-head-glow::before,
html.truth-page-hidden .section-head-glow::before {
  animation: none !important;
}
html.truth-mobile-perf .ambient-spark,
html.truth-page-hidden .ambient-spark { opacity: 0.6 !important; }
html.truth-mobile-perf .ambient-spark-3,
html.truth-mobile-perf .ambient-spark-4,
html.truth-page-hidden .ambient-spark-3,
html.truth-page-hidden .ambient-spark-4 { display: none !important; }
html.truth-mobile-perf .ambient-layer,
html.truth-page-hidden .ambient-layer { contain: layout paint; }
html.truth-mobile-perf *,
html.truth-page-hidden * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .ambient-spark,
  .sky-star,
  .section-head-glow::before {
    animation: none !important;
  }
}