/* Яркая, "детская" тема */
:root{
  --bgA:#ffeaa7;
  --bgB:#74b9ff;
  --card: rgba(255,255,255,.88);
  --card2: rgba(255,255,255,.94);
  --text:#1f2d3d;
  --muted:#516173;
  --shadow: 0 16px 40px rgba(0,0,0,.16);
  --radius: 18px;

  --bubbleNpc: rgba(255,255,255,.96);
  /* Сообщения героя — зелёные, как в WhatsApp/Telegram */
  --bubbleMe1:#d9fdd3;
  --bubbleMe2:#b8f7b0;

  --brainA:#00d2ff;
  --brainB:#a29bfe;
  --m2A:#ff6b6b;
  --m2B:#fdcb6e;

  --safeTop: env(safe-area-inset-top, 0px);
  --safeBot: env(safe-area-inset-bottom, 0px);
  --tap: 56px;
}
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
  /* Яндекс Игры: без выделения элементов/текста и без системных меню по long-tap */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.45) 0 2px, transparent 3px) 0 0/24px 24px,
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0/28px 28px,
    linear-gradient(135deg, var(--bgA), var(--bgB));

  /* Яндекс Игры: без системной прокрутки/"pull-to-refresh" — прокрутка только внутри игры */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;

  /* чтобы long-tap не вызывал выделение/контекстное меню */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app{
  height:100%;
  display:flex;
  flex-direction:column;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
}
.topbar{
  padding: calc(10px + var(--safeTop)) 12px 10px 12px;
  background: var(--card);
  backdrop-filter: blur(8px);
  position: sticky;
  top:0;
  z-index: 10;
  border-bottom: 1px solid rgba(0,0,0,.06);
  /* для выпадающего меню */
  overflow: visible;
}

/* --- Меню справа сверху --- */
.menuWrap{
  position:absolute;
  right: 10px;
  top: calc(10px + var(--safeTop));
  display:flex;
  align-items:flex-start;
  gap: 8px;
}

.menuBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.menuBtn:active{transform: scale(.99)}

.menuPanel{
  position:absolute;
  right: 0;
  top: 50px;
  width: 220px;
  padding: 8px;
  border-radius: 16px;
  background: var(--card2);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  display:none;
}
.menuPanel.show{display:block; animation: pop .18s ease-out;}

.menuItem{
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(116,185,255,.22);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 12px;
  text-align:left;
  cursor:pointer;
}
.menuItem + .menuItem{margin-top: 8px;}
.menuItem:active{transform: scale(.99)}
.npc{display:flex; gap:10px; align-items:flex-start;}
.avatar{
  width: 44px; height:44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
  background: rgba(255,255,255,.85);
}
.npcMeta{flex:1; min-width:0;}
.npcNameRow{display:flex; align-items:baseline; gap:8px; margin-bottom: 8px;}
.npcName{color:var(--text); font-weight:900; font-size:16px; line-height:1;}
.npcStatus{color: var(--muted); font-size: 12px; font-weight:700;}
.meters{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.meter{display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto auto; gap:6px 8px; align-items:center;}
.meterLabel{color: var(--muted); font-size: 13px; font-weight:900; display:flex; align-items:center; gap:6px;}
.meterBar{
  grid-column: 1 / span 2;
  height: 16px;
  border-radius: 99px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
.meterFill{height:100%; width:0%; border-radius: 99px; transition: width .25s ease;}
.meterFill.brainrot{background: linear-gradient(90deg, var(--brainA), var(--brainB));}
.meterFill.rage{background: linear-gradient(90deg, var(--m2A), var(--m2B));}
.meterFill.trust{background: linear-gradient(90deg, #00b894, #74b9ff);}
.meterVal{color: var(--text); font-size: 13px; font-weight: 900; opacity: .92;}

.chat{
  flex:1;
  overflow:auto;
  padding: 12px 12px calc(12px + var(--safeBot));
  display:flex;
  flex-direction:column;
  gap: 10px;

  /* разрешаем свайп-скролл только внутри чата */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.msgRow{display:flex; align-items:flex-end; gap:8px;}
.msgRow.me{justify-content:flex-end;}
/* на некоторых браузерах flex-item может не растягиваться как ожидается — фиксируем надёжно */
.msgRow.me{align-self: stretch;}
.msgRow.me .bubble{margin-left:auto;}
.msgRow.me > div{align-items:flex-end;}
.bubble{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transform-origin: bottom left;
  /* мягче, заметнее "всплытие" */
  animation: pop .38s cubic-bezier(.2,.9,.25,1);
  line-height: 1.25;
  font-size: 16px;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.msgRow.me .bubble{transform-origin: bottom right;}
.bubble.me{animation-duration: .60s;}
.bubble.npc{background: var(--bubbleNpc); color: #0b1020; border-bottom-left-radius: 6px;}
.bubble.me{background: linear-gradient(135deg, var(--bubbleMe1), var(--bubbleMe2)); color: #0b1020; border-bottom-right-radius: 6px;}
.metaTime{color: rgba(31,45,61,.55); font-size: 11px; font-weight:700; margin-top:2px;}
.msgRow.me .metaTime{text-align:right;}

@keyframes pop{
  from{transform: translateY(10px) scale(.985); opacity:0; filter: blur(.2px);}
  to{transform: translateY(0) scale(1); opacity:1;}
}

/* typing bubble */
.bubble.typing{
  padding: 12px 12px;
  width: 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11,16,32,.55);
  opacity: .35;
  transform: translateY(0);
  animation: dot 1.0s infinite ease-in-out;
}
.dot:nth-child(2){animation-delay: .12s;}
.dot:nth-child(3){animation-delay: .24s;}
@keyframes dot{
  0%, 100%{opacity:.30; transform: translateY(0);}
  50%{opacity:.90; transform: translateY(-3px);}
}

/* эффект "печатания" текста (тонкий) */
.bubble.typingText{
  position: relative;
}
.bubble.typingText::after{
  content: '▍';
  display:inline-block;
  margin-left: 2px;
  opacity: .55;
  animation: caret .9s steps(1) infinite;
}
@keyframes caret{
  0%,49%{opacity:.55}
  50%,100%{opacity:0}
}

.controls{
  padding: 10px 12px calc(12px + var(--safeBot));
  background: var(--card);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.06);
}
.answers{display:grid; grid-template-columns: 1fr; gap:10px; margin-top: 0px;}
.btn{
  min-height: var(--tap);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  padding: 12px 12px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active{transform: scale(.99);}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}
.btn.primary{background: rgba(162,155,254,.55); border-color: rgba(162,155,254,.45);}
.btn.secondary{background: rgba(85,239,196,.45); border-color: rgba(85,239,196,.35);}
.btn.ghost{background: transparent; border-color: rgba(255,255,255,.10); box-shadow:none; min-height: 44px; font-size: 14px; padding: 10px 12px;}
.btn.answer{background: rgba(255,255,255,.90);}
.btn.answer.best{outline: 2px solid rgba(255,255,255,.55);}

/* скрытие третьего ответа, если его нет */
.btn.hidden{display:none !important;}

/* “секретный” ответ за рекламу */
.btn.answer.locked{
  background: rgba(255,107,107,.18);
  border-color: rgba(255,107,107,.25);
}

.smallRow{display:flex; gap:10px; margin-top: 10px;}
.smallRow .btn{flex:1; text-align:center;}

@media (max-width: 390px){
  .smallRow{gap:8px;}
  .smallRow .btn{font-size: 13px; padding: 10px 8px;}
}

@media (max-width: 420px){
  .smallRow{gap:8px;}
  .btn.ghost{font-size: 13px; padding: 10px 10px;}
}

.overlay{
  position: fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.35);
  z-index: 50;
}
.overlay.show{display:flex;}

#overlayStart{
  background: #f3f6ff;
}
#overlayStart .card{
  background: #fff;
}
.card{
  width: min(520px, 100%);
  background: var(--card2);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  touch-action: pan-y;
}
.title{color: var(--text); font-weight: 950; font-size: 20px; margin-bottom: 8px;}
.text{color: rgba(31,45,61,.92); font-size: 15px; line-height:1.35; font-weight:650;}
.muted{color: var(--muted);}
.stack{display:grid; gap:10px; margin-top: 12px;}
.fineprint{color: rgba(31,45,61,.55); font-size: 12px; margin-top: 10px; font-weight:700;}
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(12px + var(--safeBot));
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  display:none;
  max-width: min(520px, calc(100% - 24px));
  z-index: 80;
  font-size: 14px;
}
.toast.show{display:block; animation: toastIn .18s ease-out;}
@keyframes toastIn{
  from{transform: translateX(-50%) translateY(6px); opacity:0;}
  to{transform: translateX(-50%) translateY(0); opacity:1;}
}

@media (min-width: 520px){
  .meters{grid-template-columns: 1fr 1fr;}
}

/* Летающий пузырь выбранной фразы */
.flyingBubble{
  position: fixed;
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--bubbleMe1), var(--bubbleMe2));
  box-shadow: var(--shadow);
  max-width: min(72vw, 520px);
  color: #0b1020;
  font-weight: 700;
  pointer-events:none;
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .55s ease;
}

/* Злость NPC: краснеет + чуть "надувается" */
.avatar.angryPulse{ animation: angryPulse .45s ease; }
.avatar.angryTint{ box-shadow: 0 0 0 6px rgba(255,107,107,.35); }
@keyframes angryPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.11); }
  70%{ transform: scale(0.98); }
  100%{ transform: scale(1); }
}

/* Карточка туториала чуть шире и мягче */
.tutorialCard{ max-width: 560px; }