:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --accent: var(--tg-theme-button-color, #2f7cf6);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --face: #fff7e0;
  --face-edge: #e0b84a;
  --found: #3cb371;
  --size: min(56vw, 220px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
.app { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 24px; }
section { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
[hidden] { display: none !important; }

/* Слово: ячейки по числу букв, найденные заполняются по порядку */
.word { display: flex; gap: 10px; }
.slot { width: 48px; height: 56px; border-radius: 10px; border: 2px dashed var(--hint);
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--hint); }
.slot.next { border-color: var(--accent); color: var(--accent); }
.slot.done { border-style: solid; border-color: var(--found); background: var(--found); color: #fff; }

/* Кубик */
.stage { width: calc(var(--size) * 1.6); height: calc(var(--size) * 1.6); perspective: 900px;
  display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.cube { position: relative; width: var(--size); height: var(--size); transform-style: preserve-3d; }
.face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--face); border: 3px solid var(--face-edge); border-radius: 14px;
  font-size: calc(var(--size) * 0.55); font-weight: 800; color: #3a2a00; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.found { background: var(--found); border-color: #2e8b57; color: #fff; }
.face.hit { animation: hit .35s ease; }
@keyframes hit { 50% { filter: brightness(1.25); } }

/* Песочные часы */
.hourglass { width: 120px; height: 190px; }
.hourglass svg { width: 100%; height: 100%; }
.hourglass.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hg-frame { fill: var(--face-edge); }
.hg-glass { fill: rgba(150, 190, 230, .18); stroke: var(--hint); stroke-width: 2; }
.hg-sand { fill: #e0b84a; }
.hg-stream { stroke: #e0b84a; stroke-width: 2; stroke-dasharray: 4 4; }
.period { font-size: 34px; font-weight: 700; min-height: 44px; text-align: center; }
.period.won { color: var(--found); }

.btn { min-width: 180px; padding: 14px 28px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text);
  font-size: 18px; font-weight: 700; cursor: pointer; }
.btn:disabled { opacity: .4; }

/* Поздравление */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.card { background: var(--bg); border-radius: 18px; padding: 24px; max-width: 360px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.card-text { font-size: 20px; line-height: 1.4; text-align: center; white-space: pre-line; }