/* Главный экран студии «Головоломки дня». Классы с префиксом h-. Общие токены — shared/base.css.
   Акцент каждой головоломки — свой (те же цвета, что в games/<id>/ui.css). */

#app {
  height: 100%;
  height: var(--tg-viewport-stable-height, 100%);
  max-width: 480px;
  margin: 0 auto;
}

.h-game {
  --acc: #174d78;
  --acc-soft: #e1ecf5;
  --on-acc: #ffffff;
}
.h-game[data-g='mozaika'] { --acc: #2b7a55; --acc-soft: #dcefe5; }
.h-game[data-g='cel'] { --acc: #a63c18; --acc-soft: #f6e3da; }
.h-game[data-g='zapomni'] { --acc: #00727f; --acc-soft: #d6ecee; }
.h-game[data-g='seyf'] { --acc: #6f5412; --acc-soft: #f1e8d2; }
.h-game[data-g='chemodan'] { --acc: #8a5a36; --acc-soft: #f2e6dc; }
.h-game[data-g='zamet'] { --acc: #8a1f5c; --acc-soft: #f5e1ec; }
.h-game[data-g='slovo'] { --acc: #5a3eb8; --acc-soft: #e8e3f7; }
.h-game[data-g='izslova'] { --acc: #0b6068; --acc-soft: #d9eeef; }

/* Заливка «главной» задачи дня: цвет игры, одинаковый в обеих темах, белая буква (APCA −81…−94, WCAG 5,2…8,9) */
.h-game { --fill: #174d78; }
.h-game[data-g='mozaika'] { --fill: #2b7a55; }
.h-game[data-g='cel'] { --fill: #a63c18; }
.h-game[data-g='zapomni'] { --fill: #00727f; }
.h-game[data-g='seyf'] { --fill: #6f5412; }
.h-game[data-g='chemodan'] { --fill: #8a5a36; }
.h-game[data-g='zamet'] { --fill: #8a1f5c; }
.h-game[data-g='slovo'] { --fill: #5a3eb8; }
.h-game[data-g='izslova'] { --fill: #0b6068; }

:root {
  --flame: #9a5b00;
  --star-on: #b87400;
  --star-off: #8a98a6;
  --scrim: rgba(12, 24, 36, 0.42);
}
:root[data-theme='dark'] {
  --flame: #f0b43c;
  --star-on: #f0b43c;
  --star-off: #6a7d90;
  --scrim: rgba(0, 0, 0, 0.55);
}
:root[data-theme='dark'] .h-game { --acc: #b4dcf6; --acc-soft: #26384b; --on-acc: #0b1620; }
:root[data-theme='dark'] .h-game[data-g='mozaika'] { --acc: #6fcf9f; --acc-soft: #1f3a2d; }
:root[data-theme='dark'] .h-game[data-g='cel'] { --acc: #f4a47f; --acc-soft: #3a2a24; }
:root[data-theme='dark'] .h-game[data-g='zapomni'] { --acc: #46d6cf; --acc-soft: #1b3a3d; }
:root[data-theme='dark'] .h-game[data-g='seyf'] { --acc: #e2c26c; --acc-soft: #3a3220; }
:root[data-theme='dark'] .h-game[data-g='chemodan'] { --acc: #e3b98e; --acc-soft: #3a2d22; }
:root[data-theme='dark'] .h-game[data-g='zamet'] { --acc: #f29ac9; --acc-soft: #3a2232; }
:root[data-theme='dark'] .h-game[data-g='slovo'] { --acc: #9b8cf7; --acc-soft: #2b2650; }
:root[data-theme='dark'] .h-game[data-g='izslova'] { --acc: #6fd0d6; --acc-soft: #1d3b3f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --flame: #f0b43c; --star-on: #f0b43c; --star-off: #6a7d90; --scrim: rgba(0, 0, 0, 0.55); }
  :root:not([data-theme]) .h-game { --acc: #b4dcf6; --acc-soft: #26384b; --on-acc: #0b1620; }
  :root:not([data-theme]) .h-game[data-g='mozaika'] { --acc: #6fcf9f; --acc-soft: #1f3a2d; }
  :root:not([data-theme]) .h-game[data-g='cel'] { --acc: #f4a47f; --acc-soft: #3a2a24; }
  :root:not([data-theme]) .h-game[data-g='zapomni'] { --acc: #46d6cf; --acc-soft: #1b3a3d; }
  :root:not([data-theme]) .h-game[data-g='seyf'] { --acc: #e2c26c; --acc-soft: #3a3220; }
  :root:not([data-theme]) .h-game[data-g='chemodan'] { --acc: #e3b98e; --acc-soft: #3a2d22; }
  :root:not([data-theme]) .h-game[data-g='zamet'] { --acc: #f29ac9; --acc-soft: #3a2232; }
  :root:not([data-theme]) .h-game[data-g='slovo'] { --acc: #9b8cf7; --acc-soft: #2b2650; }
  :root:not([data-theme]) .h-game[data-g='izslova'] { --acc: #6fd0d6; --acc-soft: #1d3b3f; }
}

/* ---------- экраны ---------- */

.h-home {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 40px;
}
.h-home[hidden], .h-play[hidden] { display: none; }

.h-top h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.h-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.h-streak {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.h-streak .ic { width: 22px; height: 22px; color: var(--muted); }
.h-streak.on .ic { color: var(--flame); }
.h-tools { display: flex; gap: 8px; }
.h-tools .rbtn[aria-pressed='false'] { color: var(--muted); }
.h-test { margin-top: 8px; font-size: 14px; color: var(--muted); }

.h-sec { margin-top: 28px; }
.h-sech {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.h-sec h2 {
  font-size: 16px;
  font-weight: 650;
}
.h-prog { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.h-note { margin: -4px 0 10px; font-size: 14px; line-height: 1.35; }
.h-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

/* ---------- задача дня ---------- */

.h-task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 12px 14px 12px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.1s ease-out;
}
.h-task:active { transform: scale(0.99); }
.h-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--acc-soft);
  color: var(--acc);
}
.h-ico .ic { width: 26px; height: 26px; }
.h-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h-cat { font-size: 14px; color: var(--muted); }
.h-name { font-size: 20px; font-weight: 650; line-height: 1.15; }
.h-state { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.h-task.done .h-state { color: var(--text); }
.h-task.next { background: var(--fill); border-color: var(--fill); color: #ffffff; }
.h-task.next .h-ico { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.h-task.next .h-cat, .h-task.next .h-state { color: #ffffff; }
.h-go {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--fill);
  font-size: 16px;
  font-weight: 650;
}
.h-end { flex: none; display: flex; align-items: center; }
.h-end .ic { width: 22px; height: 22px; color: var(--muted); }
.h-stars { display: flex; gap: 2px; }
.h-stars .star { width: 16px; height: 16px; fill: none; stroke: var(--star-off); stroke-width: 2; stroke-linejoin: round; }
.h-stars .star.on { fill: var(--star-on); stroke: var(--star-on); }

.h-flash { animation: hFlash 1.4s ease-out; }
@keyframes hFlash {
  0% { box-shadow: 0 0 0 3px var(--acc); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

.h-all {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.h-all p { font-size: 17px; font-weight: 600; }
.h-all .h-tom { margin-top: 4px; font-size: 15px; font-weight: 400; }
.h-all .h-btn { margin-top: 14px; width: 100%; }

/* ---------- кнопки ---------- */

.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  background: var(--accent);
  color: var(--on-accent);
  transition: transform 0.1s ease-out;
}
.h-btn:active:not(:disabled) { transform: scale(0.98); }
.h-btn.line {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--acc, var(--text));
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
}
.h-btn:disabled { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

/* ---------- ещё задачи ---------- */

.h-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name btn' 'blurb blurb';
  align-items: center;
  gap: 2px 12px;
  padding: 8px 10px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.h-row .h-name { grid-area: name; font-size: 17px; }
.h-row .h-btn { grid-area: btn; }
.h-row .h-state { grid-area: blurb; font-size: 14px; color: var(--text); }
.h-more {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* ---------- без рекламы ---------- */

.h-pro {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.h-pro h2 { font-size: 17px; font-weight: 650; color: var(--text); margin-bottom: 6px; }
.h-pro p { font-size: 15px; line-height: 1.4; }
.h-pro .h-btn { margin-top: 12px; }
.h-pro .h-na { margin-top: 8px; font-size: 14px; color: var(--muted); }
.h-pro .h-na:empty { display: none; }
.h-thanks { margin-top: 28px; text-align: center; }

/* ---------- экран игры ---------- */

.h-play { height: 100%; display: flex; flex-direction: column; }
.h-phead {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 8px 12px 0;
}
.h-phead h2 { text-align: center; font-size: 16px; font-weight: 650; }
body.tg .h-back { visibility: hidden; }
.h-host { flex: 1; min-height: 0; }

/* ---------- итог решённой задачи: общая карточка (shared/card.js), кнопка цвета игры ---------- */

.vscrim.h-game { --accent: var(--acc); --on-accent: var(--on-acc); }

.h-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 30;
}
.h-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 340px) {
  .h-top h1 { font-size: 23px; }
  .h-task { gap: 10px; padding-left: 12px; }
  .h-name { font-size: 19px; }
  .h-btn.line { padding: 0 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-flash { animation: none; box-shadow: 0 0 0 3px var(--acc); }
  .h-task, .h-btn, .h-toast { transition: none; }
}