/* Темы оформления поверх app.css: <html data-skin="board|poster">.
   «Табло» — тёмная приборная панель, «Плакат» — светлый спортивный плакат. */

/* ---------- Табло ---------- */

:root[data-skin="board"] {
  --bg: #0c0e12;
  --card: #13161c;
  --text: #e8ebf0;
  --muted: #8b93a1;
  --line: #262c35;
  --accent: #ffb020;
  --accent-2: #ffb020;
  --accent-soft: #2a2110;
  --ok: #4ade80;
  --ok-soft: #12301e;
  --warn: #fbbf24;
  --warn-soft: #2e2510;
  --danger: #f87171;
  --shadow: none;
  --radius: 2px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

[data-skin="board"] body { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; }
[data-skin="board"] h2 { font-weight: 700; letter-spacing: 0.01em; }
[data-skin="board"] .eyebrow,
[data-skin="board"] .tag,
[data-skin="board"] .slot { font-family: var(--mono); }
[data-skin="board"] .eyebrow { letter-spacing: 0.04em; }
[data-skin="board"] .tag { border-radius: 2px; }
[data-skin="board"] .btn { border-radius: 2px; }
[data-skin="board"] .btn.primary {
  color: #0c0e12; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}

[data-skin="board"] .lvl-badge {
  background: transparent; border: 2px solid var(--accent); border-radius: 50%;
  color: var(--text); font-family: var(--mono);
}
[data-skin="board"] .bar { height: 10px; border-radius: 0; background: var(--line); }
[data-skin="board"] .bar span {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 11px);
}
[data-skin="board"] .stat .big,
[data-skin="board"] .stat b,
[data-skin="board"] .measure b { font-family: var(--mono); }
[data-skin="board"] .ring-fg { stroke: var(--accent); stroke-linecap: butt; }

[data-skin="board"] .slot { background: transparent; color: var(--accent); border-radius: 0; min-width: 28px; }
[data-skin="board"] .plan li { border-top-color: #1a1f26; }

[data-skin="board"] .set {
  border: 0; border-top: 3px solid var(--line); border-radius: 0; background: #1a1f26;
}
[data-skin="board"] .set input { font-family: var(--mono); font-size: 1.8rem; }
[data-skin="board"] .set.ok { background: #1a1f26; border-top-color: var(--text); }
[data-skin="board"] .set.top { background: #1a1f26; border-top-color: var(--accent); }
[data-skin="board"] .set.top input { color: var(--accent); }

[data-skin="board"] .thumb,
[data-skin="board"] .frame,
[data-skin="board"] .ach,
[data-skin="board"] .big-input,
[data-skin="board"] .mform input,
[data-skin="board"] .field input { border-radius: 2px; }
[data-skin="board"] .node { border-radius: 0; width: 14px; height: 10px; }
[data-skin="board"] .node.current { box-shadow: none; }

[data-skin="board"] .tabs { background: var(--bg); }
[data-skin="board"] .tabs a.active span { filter: sepia(1) saturate(4) hue-rotate(-10deg); }

[data-skin="board"] .timer {
  background: var(--card); color: var(--text); border: 1px solid var(--accent);
  border-radius: 2px; box-shadow: none;
}
[data-skin="board"] .timer b { font-family: var(--mono); color: var(--accent); font-size: 1.4rem; }
[data-skin="board"] .timer .btn { color: var(--text); }
[data-skin="board"] .toast { background: var(--card); color: var(--text); border: 1px solid var(--accent); border-radius: 2px; }
[data-skin="board"] .modal { border: 1px solid var(--line); border-radius: 2px; }
[data-skin="board"] .doc blockquote { border-radius: 0; }

/* ---------- Плакат ---------- */

:root[data-skin="poster"] {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #0a0a0a;
  --muted: #4b4b4b;
  --line: #0a0a0a;
  --accent: #d4ff00;
  --accent-2: #d4ff00;
  --accent-soft: #f2ffc2;
  --ok: #15803d;
  --ok-soft: #d4ff00;
  --warn: #8a4b00;
  --warn-soft: #fff1c2;
  --danger: #c81e1e;
  --shadow: none;
  --radius: 0;
  --display: "Oswald", "Arial Narrow", sans-serif;
  color-scheme: light;
}

[data-skin="poster"] body { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 15px; }
[data-skin="poster"] a { color: var(--text); }
[data-skin="poster"] h2,
[data-skin="poster"] h3,
[data-skin="poster"] .hero-title,
[data-skin="poster"] .doc h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05;
}
[data-skin="poster"] h2 { font-size: 1.9rem; }
[data-skin="poster"] h3 { font-size: 1.4rem; }
[data-skin="poster"] .doc h2,
[data-skin="poster"] .doc h3 { text-transform: none; }
[data-skin="poster"] .eyebrow { color: var(--text); font-weight: 600; }

[data-skin="poster"] .card { border-width: 3px; }
[data-skin="poster"] .card.warn { border-color: var(--line); }
[data-skin="poster"] .tag { background: var(--text); color: var(--accent); border-radius: 0; }
[data-skin="poster"] .note { border: 2px solid var(--line); border-radius: 0; }

[data-skin="poster"] .btn {
  border: 3px solid var(--line); border-radius: 0; text-transform: uppercase; font-weight: 600;
}
[data-skin="poster"] .btn.primary {
  background: var(--accent); border-color: var(--line); color: var(--text);
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em;
}
[data-skin="poster"] .btn.small.primary { font-size: 1rem; }
[data-skin="poster"] .btn.danger { border-color: var(--danger); }

[data-skin="poster"] .lvl-badge {
  background: var(--text); color: var(--accent); border-radius: 0;
  font-family: var(--display); font-size: 1.9rem;
}
[data-skin="poster"] .bar { height: 12px; border-radius: 0; background: var(--text); }
[data-skin="poster"] .bar span { border-radius: 0; background: var(--accent); }
[data-skin="poster"] .stat .big,
[data-skin="poster"] .stat b { font-family: var(--display); font-size: 1.4rem; }
[data-skin="poster"] .ring-bg { stroke: #e3e3e3; }
[data-skin="poster"] .ring-fg { stroke: var(--text); stroke-linecap: butt; }

[data-skin="poster"] .slot { background: var(--text); color: var(--accent); border-radius: 0; }

[data-skin="poster"] .set { border: 3px solid var(--line); border-radius: 0; color: var(--text); font-weight: 600; }
[data-skin="poster"] .set input { font-family: var(--display); font-size: 2.2rem; }
[data-skin="poster"] .set.ok { background: #efefef; border-color: var(--line); }
[data-skin="poster"] .set.top { background: var(--accent); border-color: var(--line); }

[data-skin="poster"] .thumb,
[data-skin="poster"] .frame { border-radius: 0; }
[data-skin="poster"] .play { background: transparent; }
[data-skin="poster"] .play::before {
  content: ""; position: absolute; width: 48px; height: 48px; background: var(--accent);
  left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;
}
[data-skin="poster"] .play { color: var(--text); z-index: 0; }

[data-skin="poster"] .node { border-radius: 0; border-color: var(--line); }
[data-skin="poster"] .node.done { background: var(--text); border-color: var(--text); }
[data-skin="poster"] .node.current { background: var(--accent); border-color: var(--line); box-shadow: none; }
[data-skin="poster"] .ach { border: 2px solid var(--line); border-radius: 0; }
[data-skin="poster"] .ach.earned { background: var(--accent); border-color: var(--line); }
[data-skin="poster"] .big-input,
[data-skin="poster"] .mform input,
[data-skin="poster"] .field input { border: 3px solid var(--line); border-radius: 0; }
[data-skin="poster"] .big-input { font-family: var(--display); }
[data-skin="poster"] summary { color: var(--text); text-decoration: underline; }
[data-skin="poster"] .spark polyline { stroke: var(--text); }
[data-skin="poster"] .doc pre { border-radius: 0; background: #f2f2f2; }
[data-skin="poster"] .doc blockquote { border-left: 6px solid var(--text); border-radius: 0; }
[data-skin="poster"] .docs li a { border-top: 2px solid var(--line); }

[data-skin="poster"] .tabs { border-top: 3px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
[data-skin="poster"] .tabs a {
  color: var(--text); text-transform: uppercase; font-weight: 600; font-size: 0.68rem;
  padding: 14px 0 16px; justify-content: center;
}
[data-skin="poster"] .tabs a + a { border-left: 3px solid var(--line); }
[data-skin="poster"] .tabs a span { display: none; }
[data-skin="poster"] .tabs a.active { background: var(--text); color: #ffffff; }

[data-skin="poster"] .timer { background: var(--text); color: #ffffff; border-radius: 0; box-shadow: none; }
[data-skin="poster"] .timer b { font-family: var(--display); color: var(--accent); font-size: 1.6rem; }
[data-skin="poster"] .timer .btn { color: #ffffff; border: 0; }
[data-skin="poster"] .toast { background: var(--text); color: #ffffff; border-radius: 0; }
[data-skin="poster"] .modal { border: 3px solid var(--line); border-radius: 0; }
[data-skin="poster"] .modal h2 { font-size: 2.2rem; }
[data-skin="poster"] .offline { border-bottom: 3px solid var(--line); }

/* ---------- отказ от ответственности в обеих темах ---------- */

[data-skin="board"] .legal-foot,
[data-skin="board"] .legal-note { font-family: var(--mono); color: var(--muted); }
[data-skin="board"] .legal-foot { border-top-color: var(--line); }
[data-skin="board"] .pain-warn { border-radius: 2px; border-left: 3px solid var(--warn); }

[data-skin="poster"] .legal-foot { border-top: 3px solid var(--line); padding-top: 10px; color: var(--text); }
[data-skin="poster"] .legal-note { color: var(--text); font-weight: 600; }
[data-skin="poster"] .pain-warn { border: 3px solid var(--line); border-radius: 0; color: var(--text); background: var(--warn-soft); font-weight: 600; }
[data-skin="poster"] .consent .btn:disabled { background: #e6e6e6; }

/* iOS в режиме standalone (black-translucent) рисует белые часы поверх страницы:
   в светлом «Плакате» подкладываем под строку состояния чёрную полосу. */
[data-skin="poster"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: env(safe-area-inset-top); background: var(--text); pointer-events: none;
}