/* «Слово дня»: всегда фирменная тёмная тема, как на иконке бота. */
:root {
  --bg: #121826;
  --surface: #1d2640;
  --surface2: #29344f;
  --text: #eef1f8;
  --muted: #8d97b0;
  --line: #ffffff12;
  --accent: #4caf50;
  --accent-text: #fff;
  --accent-strong: #5fd065;
  --me-bg: #4caf5026;
  --tabbar-bg: #121826e8;
  --shadow: 0 6px 18px #0004;
  --green: #4caf50;
  --yellow: #e6b422;
  --gray: #4a5268;
  --tile-empty: #2a3350;
  color-scheme: dark;
}
body { background: radial-gradient(120% 60% at 50% -10%, #26324f 0, #121826 70%) fixed, #121826; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.logo { display: flex; align-items: center; gap: 3px; }
.lt { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 13px;
  font-weight: 900; color: #fff; box-shadow: 0 2px 0 #0005; }
.lt.g { background: var(--green); } .lt.y { background: var(--yellow); } .lt.x { background: var(--gray); }
.logo-sub { margin-left: 6px; font-weight: 800; font-size: 16px; }
.logo-sub b { color: var(--muted); font-weight: 700; font-size: 14px; }
.chips { display: flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border-radius: 999px;
  padding: 5px 10px; font-size: 14px; border: 0; color: var(--text); font: inherit; font-weight: 700; }
.chip.help { width: 32px; justify-content: center; padding: 5px 0; cursor: pointer; }
.page-title { font-size: 22px; font-weight: 800; margin: 4px 2px 6px; }

/* Поле: размер подстраивается под высоту экрана, чтобы клавиатура влезала без прокрутки */
.board { --w: min(330px, 100%, calc((var(--tg-viewport-stable-height, 100vh) - 380px) * .83));
  width: var(--w); margin: 4px auto 6px; display: grid; gap: 6px; container-type: inline-size; }
.board-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.board-row.shake { animation: shake .35s; }
.tile { aspect-ratio: 1; display: grid; place-items: center; font-size: 26px; font-size: 9.5cqw; font-weight: 900;
  text-transform: uppercase; border-radius: 10px; background: var(--tile-empty); color: #fff; user-select: none;
  box-shadow: inset 0 0 0 2px #ffffff10; transition: transform .1s; }
.tile.filled { box-shadow: inset 0 0 0 2px #ffffff55; animation: pop .12s; }
.tile.hinted { color: #ffffff66; }
.tile.c, .tile.p, .tile.a { box-shadow: 0 3px 0 #0005; }
.tile.c { background: var(--green); } .tile.p { background: var(--yellow); } .tile.a { background: var(--gray); }
.tile.reveal { animation: flip .45s both; }
.board-row.win .tile { animation: jump .5s both; }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes jump { 40% { transform: translateY(-14px); } 70% { transform: translateY(3px); } }

.hint-line { text-align: center; min-height: 18px; color: var(--yellow); font-size: 13px; font-weight: 600; }

.assist { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
.assist .pill-btn { background: var(--surface); }

.keyboard { display: flex; flex-direction: column; gap: 6px; }
.kb-row { display: flex; gap: 4px; justify-content: center; }
.key { flex: 1; min-width: 0; height: 50px; border: 0; border-radius: 8px; background: #3a4566; color: #fff;
  font: inherit; font-weight: 800; font-size: 16px; text-transform: uppercase; cursor: pointer; padding: 0;
  box-shadow: 0 2px 0 #0006; }
.key:active { transform: translateY(1px); box-shadow: none; }
.key.wide { flex: 1.55; font-size: 12px; }
.key.c { background: var(--green); } .key.p { background: var(--yellow); } .key.a { background: #252c40; color: #ffffff55; }

/* Итог дня */
.result { text-align: center; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.result-title { font-size: 22px; font-weight: 900; }
.answer { display: flex; justify-content: center; gap: 4px; }
.answer span { width: 30px; height: 30px; border-radius: 6px; background: var(--green); display: grid;
  place-items: center; font-weight: 900; text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stats div { background: var(--surface); border-radius: 12px; padding: 8px 2px; font-size: 11px; color: var(--muted); }
.stats b { display: block; font-size: 20px; color: var(--text); }
.dist-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.dist { display: flex; flex-direction: column; gap: 4px; }
.dist-row { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.dist-row .n { width: 12px; color: var(--muted); }
.dist-row .bar { height: 20px; min-width: 24px; border-radius: 5px; background: var(--gray); color: #fff;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 7px; }
.dist-row.cur .bar { background: var(--green); }
.next { color: var(--muted); font-size: 14px; }
.next b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Рейтинг */
.invite-card { display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #2f6b3a, #1d2640 70%); }
.lb-score { font-weight: 800; min-width: 38px; text-align: right; }
.lb-score.won { color: var(--accent-strong); } .lb-score.lost { color: #ef6c57; } .lb-score.wait { color: var(--muted); font-weight: 600; font-size: 13px; }
.streak-tag { color: #ffb26b; font-size: 12px; font-weight: 700; margin-left: 4px; }

/* Бонусы */
.balance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bal { margin: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 6px; }
.bal-ic { font-size: 24px; } .bal b { font-size: 22px; }
.earn { padding: 4px 14px; }
.earn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.earn-row + .earn-row { border-top: 1px solid var(--line); }
.earn-ic { font-size: 26px; }
.earn-row .grow { flex: 1; }
.explain { line-height: 1.6; margin: 14px 4px; }

/* Правила */
.ex { display: flex; gap: 4px; margin: 8px 0 4px; }
.ex span { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-weight: 900;
  text-transform: uppercase; background: var(--tile-empty); color: #fff; }
.ex .c { background: var(--green); } .ex .p { background: var(--yellow); } .ex .a { background: var(--gray); }

/* Загадка от друга */
.challenge-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 8px;
  background: linear-gradient(90deg, #6a3fc8, #29344f); border-radius: 12px; padding: 7px 8px 7px 12px; font-size: 14px; }
.challenge-bar .pill-btn { background: #ffffff22; padding: 6px 10px; font-size: 13px; }

.make p { margin: 0 0 10px; }
.word-input { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.word-input span { width: 46px; height: 46px; border-radius: 9px; background: var(--tile-empty); display: grid; place-items: center;
  font-size: 22px; font-weight: 900; text-transform: uppercase; box-shadow: inset 0 0 0 2px #ffffff14; }
.word-input span.f { background: var(--green); box-shadow: 0 3px 0 #0005; }
#secretWord { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; margin-bottom: 10px;
  border: 2px solid var(--surface2); background: var(--bg); color: var(--text); outline: none; text-transform: lowercase; }
#secretWord:focus { border-color: var(--green); }
.ch-word { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ch-results { font-size: 12px; color: var(--muted); }
.ch-results b { color: var(--text); }