/* ===== ПИКСЕЛЬНЫЙ СЛОЙ «Города решений» =====
   Подключается последним: перекрывает шрифты, формы и анимации.
   Цвета тёмной темы — в style.css / festival.css (переменные --*-bg / --*-bd). */

@font-face { font-family: 'Pixelify'; font-weight: 400; font-display: swap; src: url(/assets/fonts/pixelify-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF; }
@font-face { font-family: 'Pixelify'; font-weight: 400; font-display: swap; src: url(/assets/fonts/pixelify-sans-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Pixelify'; font-weight: 700; font-display: swap; src: url(/assets/fonts/pixelify-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF; }
@font-face { font-family: 'Pixelify'; font-weight: 700; font-display: swap; src: url(/assets/fonts/pixelify-sans-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'PS2P'; font-display: swap; src: url(/assets/fonts/press-start-2p-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: 'PS2P'; font-display: swap; src: url(/assets/fonts/press-start-2p-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JBM'; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF; }
@font-face { font-family: 'JBM'; font-weight: 400; font-display: swap; src: url(/assets/fonts/jetbrains-mono-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JBM'; font-weight: 700; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF; }
@font-face { font-family: 'JBM'; font-weight: 700; font-display: swap; src: url(/assets/fonts/jetbrains-mono-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'VT'; font-display: swap; src: url(/assets/fonts/vt323-latin-400-normal.woff2) format('woff2'); }

:root {
  --px-bg: #0b0d1a;
  --px-panel: #151935;
  --px-line: #2a3060;
  --px-line2: #3a4280;
  --px-yellow: #ffd23f;
  --px-yellow-d: #a8850c;
  --px-green: #2ee59d;
  --px-red: #ff4f6d;
  --pixel: 'JBM', 'Consolas', 'Segoe UI', monospace;
  --pixel2: 'PS2P', 'JBM', monospace;
  --num: 'VT', 'JBM', monospace;
  --display: var(--pixel2);
  font-family: var(--pixel);
  background: var(--px-bg);
  color-scheme: dark;
}
html, body { background: var(--px-bg) !important; }
body { font-family: var(--pixel); }
h1, h2, .clock, .metric strong { -webkit-font-smoothing: none; }
#app { position: relative; z-index: 1; }

/* звёздный фон + CRT-сканлайны */
#px-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }

/* никаких скруглений — только квадратные пиксели */
*, *::before, *::after { border-radius: 0 !important; }

/* ---------- типографика ---------- */
button, input, select, textarea { font-family: var(--pixel); }
h1 { font-family: var(--pixel2) !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.25 !important; font-size: clamp(20px, 3.4vw, 40px) !important; text-shadow: 3px 3px 0 #000; }
h2 { font-family: var(--pixel2) !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.45 !important; font-size: clamp(12px, 1.25vw, 16px) !important; }
h3 { font-family: var(--pixel); font-weight: 700; letter-spacing: -.2px; }
.landing-heading h1, .hero h1 { font-size: clamp(26px, 5.2vw, 64px) !important; line-height: 1.15 !important; }
.landing-heading h1 span, h1 em, h1 b { color: var(--px-yellow) !important; }

/* цифры — терминальный пиксельный шрифт */
.metric strong, .clock, .price, .quote-value, .code, .nav-number, td, .resource-stock, .receipt-metrics strong, .starting-capital strong, .exchange-summary strong, .podium strong, .award strong {
  font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.metric strong { font-size: 44px !important; line-height: 1; color: var(--px-yellow); text-shadow: 3px 3px 0 #000; }
td { font-size: 18px; }

/* таймер раунда */
.clock {
  font-size: 34px !important; color: var(--px-yellow) !important; background: #05060d; padding: 2px 12px 4px;
  box-shadow: 0 0 0 3px var(--px-line2), inset 0 -3px 0 rgba(255,255,255,.04); text-shadow: 0 0 6px rgba(255,210,63,.35);
}

/* ---------- кнопки: «нажимаются» ---------- */
button {
  font-weight: 700; letter-spacing: .3px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.38), 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000 !important;
  margin: 3px; transition: transform .06s steps(1), filter .1s steps(2) !important;
}
button:hover:not(:disabled) { transform: none !important; filter: brightness(1.15); }
button:active:not(:disabled) { transform: translateY(2px) !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.38), 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000 !important; }
button.primary { background: var(--px-yellow) !important; color: #221a00 !important; box-shadow: inset 0 -4px 0 var(--px-yellow-d), 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000 !important; }
button.primary:active:not(:disabled) { box-shadow: inset 0 -1px 0 var(--px-yellow-d), 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000 !important; }
button.danger { background: var(--px-red) !important; color: #2a0610 !important; }
button.ghost, .tabs button, nav button, .sidebar button, .header a, .header button, button.link {
  box-shadow: none !important; margin: 0;
}
.sidebar button.active, .tabs button.active, nav button.active { box-shadow: inset 3px 0 0 var(--px-yellow) !important; color: var(--px-yellow) !important; }
.tabs button.active { box-shadow: inset 0 -3px 0 var(--px-yellow) !important; }

/* ---------- поля ввода ---------- */
input, select, textarea {
  background: #05060d !important; color: #e6e9ff !important; border: 0 !important;
  box-shadow: inset 3px 3px 0 #000, 0 0 0 3px var(--px-line) !important; font-size: 17px;
}
input:focus, select:focus, textarea:focus { outline: 0 !important; box-shadow: inset 3px 3px 0 #000, 0 0 0 3px var(--px-yellow) !important; }
input::placeholder, textarea::placeholder { color: #5a6198 !important; }

/* ---------- карточки: рамка «лесенкой» ---------- */
.panel, .metric, .decision-card, .offer, .award, .business-card, .security-card, .landing-access, .task-sheet,
.town-panel, .event-stage, .resource, .notice, .entry, .review, .member, .council-item, .spotlight, .plan,
.progression-banner, .break-banner, .scenario, .hall > section, dialog, .exchange-summary, .podium > * {
  border-color: transparent !important;
  box-shadow: 0 -3px 0 0 var(--px-line), 0 3px 0 0 var(--px-line), -3px 0 0 0 var(--px-line), 3px 0 0 0 var(--px-line), 6px 6px 0 0 rgba(0,0,0,.45) !important;
}
.resource { box-shadow: 0 -3px 0 0 var(--px-line2), 0 3px 0 0 var(--px-line2), -3px 0 0 0 var(--px-line2), 3px 0 0 0 var(--px-line2) !important; }
@keyframes px-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tag, .badge, .phase, .role {
  font-family: var(--pixel); border: 0 !important; box-shadow: 0 0 0 2px var(--px-line2) !important;
}

/* верхняя шапка и фаза */
.header { border-bottom: 3px solid var(--px-line) !important; background: rgba(11,13,26,.92) !important; backdrop-filter: blur(3px); }
.phasebar { border-bottom: 3px solid #000 !important; box-shadow: inset 0 -3px 0 var(--px-line2) !important; }

/* статус-точки мигают */
[class*="dot"], .live::before { animation: px-blink 1.2s steps(2) infinite; }
@keyframes px-blink { 50% { opacity: .25; } }

/* ---------- карта города: «пиксельная» ---------- */
.town-canvas svg, .city-map svg, .region-map svg, .landing-scene svg, .hero-town svg { shape-rendering: crispEdges; }
.town-canvas, .city-map, .region-map, .landing-scene, .hero-town { filter: saturate(1.15) brightness(.82) contrast(1.05); }

/* логотип */
img[src*="mirea"], .logo img { image-rendering: pixelated; }
.px-mirea { image-rendering: pixelated; height: 46px !important; width: auto !important; filter: drop-shadow(2px 2px 0 #000); }

/* загрузка */
.loading {
  font-family: var(--pixel2); font-size: 12px; color: var(--px-yellow); text-align: center; line-height: 2;
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.loading::before { content: ''; width: 64px; height: 20px; background: linear-gradient(90deg, var(--px-green) 0 20%, transparent 20% 25%, var(--px-green) 25% 45%, transparent 45% 50%, var(--px-green) 50% 70%, transparent 70% 75%, var(--px-green) 75% 95%, transparent 95%); background-size: 64px 20px; box-shadow: 0 0 0 3px var(--px-line2); animation: px-load 1s steps(4) infinite; }
@keyframes px-load { 0% { clip-path: inset(0 75% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* тосты и модалки */
#toast { font-family: var(--pixel) !important; box-shadow: 0 -3px 0 var(--px-yellow), 0 3px 0 var(--px-yellow), -3px 0 0 var(--px-yellow), 3px 0 0 var(--px-yellow), 6px 6px 0 rgba(0,0,0,.5) !important; background: var(--px-panel) !important; color: #e6e9ff !important; }
dialog::backdrop { background: rgba(5,6,13,.82); }

/* таблицы */
table { border-collapse: collapse; }
th { font-family: var(--pixel); color: #8b93c7 !important; }
tr:hover td { background: rgba(255,210,63,.05); }

/* кнопка звука */
#px-sound { position: fixed; left: 12px; bottom: 12px; z-index: 50; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--px-panel); }
#px-sound img { width: 20px; image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

@media (max-width: 760px) {
  .metric strong { font-size: 24px !important; white-space: nowrap; }
  .clock { font-size: 26px !important; padding: 0 8px 2px; }
  h1 { font-size: clamp(18px, 6vw, 28px) !important; }
  .landing-heading h1, .hero h1 { font-size: clamp(24px, 9vw, 40px) !important; }
  td { font-size: 16px; }
}

/* ---------- лендинг: только карта, без лишнего ---------- */
.landing-index { display: none !important; }                       /* ПРОИЗВОДСТВО / РЫНОК / РАЗВИТИЕ */
.landing-heading { border-left: 0 !important; padding-left: 0 !important; }   /* вертикальная линия */
.landing-scene .scene-meta, .landing-scene .scene-caption { display: none !important; }
.landing-scene svg > .map-title, .landing-scene svg > .map-caption,
.landing-scene svg > g[transform^="translate(669"], .landing-scene svg > path:nth-last-child(2) { display: none !important; }
.landing-scene { padding: 0 !important; overflow: hidden; }
.landing-scene svg { display: block; width: 100%; height: auto; }
.landing-bottom { display: none !important; }                      /* 01 / 02 / 03 — правила и так обязательны */

/* цифры под картой — ровно в линию */
.landing-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; gap: 16px !important; }
.landing-facts > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.landing-facts b { font-family: var(--pixel) !important; font-weight: 700 !important; font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1 !important; white-space: nowrap; color: var(--px-yellow); text-shadow: 3px 3px 0 #000; }
.landing-facts span { font-size: 13px; line-height: 1.35; }