/* Светлый дизайн в духе liquid glass. Не зависим от темы Telegram. */
:root {
  --red: #ff3355;            /* хоккейный акцент */
  --text: #16202e;
  --hint: #5b6b82;
  --ok: #18a564;
  --bad: #e23a4e;
  --glass: rgba(255, 255, 255, .42);
  --glass-2: rgba(255, 255, 255, .32);
  --glass-brd: rgba(255, 255, 255, .85);
  --piece-shadow: drop-shadow(0 6px 12px rgba(40, 70, 120, .28));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  overflow: hidden;
  padding: 12px;
}

/* Светлый фон с цветными «каплями» */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 38% at 16% 12%, rgba(120, 200, 255, .55), transparent 62%),
    radial-gradient(42% 36% at 86% 16%, rgba(255, 130, 165, .5), transparent 62%),
    radial-gradient(60% 50% at 50% 112%, rgba(150, 175, 255, .55), transparent 60%),
    linear-gradient(180deg, #eef4fc 0%, #e2eaf6 100%);
}

/* Матовая стеклянная карточка — усиленный liquid glass */
#card {
  position: relative;
  width: min(94vw, 410px);
  max-height: calc(100dvh - 24px);
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%),
    var(--glass);
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  border: 1px solid var(--glass-brd);
  border-radius: 30px;
  box-shadow:
    0 28px 70px rgba(40, 70, 120, .28),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.head { margin-bottom: 2px; }
.head p { margin: 0; }
/* всегда в одну строку — масштабируется по ширине экрана */
#intro {
  font-size: clamp(11px, 3.7vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
}
#ask { font-size: 13.5px; line-height: 1.4; color: var(--hint); margin-top: 4px; }
#question {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
}

/* Подсветка ключевых слов («пазл», имя игрока) */
.hl {
  color: var(--red);
  font-weight: 800;
}

.rink-line {
  width: 78px;
  height: 3px;
  margin: 9px auto 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

#status {
  font-size: 13px;
  color: var(--hint);
  min-height: 17px;
  transition: color .2s;
}
#status.bad { color: var(--bad); }

/* Доска — ограничена и по ширине, и по высоте, чтобы всё влезло в экран */
#stage {
  position: relative;
  width: min(68vw, 32dvh, 290px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 12px 30px rgba(40, 70, 120, .22), inset 0 0 0 1px rgba(255, 255, 255, .55);
  user-select: none;
  touch-action: none;
}
#board { display: block; width: 100%; height: auto; pointer-events: none; }

/* Подсветка дырки */
#target {
  position: absolute;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 51, 85, .95), 0 0 22px 5px rgba(255, 51, 85, .4);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,51,85,.9), 0 0 16px 3px rgba(255,51,85,.32); }
  50%      { box-shadow: 0 0 0 2px rgba(90,170,255,.95), 0 0 28px 8px rgba(90,170,255,.45); }
}
#target.hidden { display: none; }

/* Лоток */
#tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), var(--glass-2);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 4px 14px rgba(40, 70, 120, .12);
}
.piece {
  display: block;
  filter: var(--piece-shadow);
  cursor: grab;
  touch-action: none;
  will-change: transform, left, top, width;
  animation: floatin .4s ease both;
}
@keyframes floatin {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.piece.dragging { z-index: 1000; cursor: grabbing; filter: drop-shadow(0 16px 26px rgba(40,70,120,.5)); }
.piece.placed { pointer-events: none; }

@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(6px); }
  50%      { transform: translateX(-8px); }
}
.shake { animation: shake .4s; }

/* Оверлей итога — светлое стекло */
#overlay[hidden] { display: none !important; }
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text);
  /* непрозрачный светлый фон (как у приложения): без backdrop-blur, поэтому
     нет зернистости стекла — прозрачный логотип ложится чисто */
  background:
    radial-gradient(52% 40% at 50% 16%, rgba(120, 200, 255, .38), transparent 62%),
    radial-gradient(46% 38% at 84% 88%, rgba(255, 130, 165, .30), transparent 60%),
    linear-gradient(180deg, #eef4fc 0%, #e3ebf7 100%);
  z-index: 2000;
  animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#ov-icon { font-size: 70px; line-height: 1; animation: pop .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* лого команды в финальном оверлее — прозрачное, без подложки и без тени
   (drop-shadow на детальном SVG давал зернистый ореол — «сыпь») */
.ov-logo {
  display: block;
  height: 160px;
  width: auto;
}
#ov-text {
  font-size: 17px;
  font-weight: 700;
  padding: 0 28px;
  white-space: pre-line;
  text-align: center;   /* ровно по центру обе строки */
  line-height: 1.35;
}