/* Интерфейс по ходу игры (js/reveal.js): появление кнопок, разовая подсветка, плашка «Новое» */

/* портрет телефона: видимые вкладки — по центру, без дыр на месте ещё не открытых */
body.mobile:not(.land) #tabs { grid-template-columns: repeat(var(--rv-n, 8), minmax(0, 68px)); justify-content: center; }

/* появление: выезд снизу со вспышкой, потом мягкое свечение до первого нажатия */
.rv-new { position: relative; animation: rv-in .7s cubic-bezier(.2, 1.4, .4, 1) both, rv-glow 1.4s ease-in-out .7s infinite; z-index: 1; }
@keyframes rv-in {
  0% { opacity: 0; transform: translateY(14px) scale(.4); filter: brightness(3); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.12); filter: brightness(1.8); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rv-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 6px 1px rgba(246, 212, 88, .35); }
  50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 16px 5px rgba(246, 212, 88, .75); }
}
/* обучение подсвечивает своё — не спорим с ним */
.rv-new.tut-hl { animation: tutPulse 1.1s ease-in-out infinite; }

.rv-note {
  position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%);
  z-index: 22; display: flex; gap: 10px; align-items: center; width: max-content; max-width: min(460px, 92vw);
  padding: 10px 14px 10px 10px; cursor: pointer; color: var(--text);
  background: linear-gradient(rgba(16, 10, 5, .8), rgba(16, 10, 5, .8)), var(--planks); border: 2px solid #0a0705; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--gold), 0 6px 18px rgba(0, 0, 0, .75);
  animation: rv-note-in .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.rv-note.out { animation: rv-note-out .3s ease-in both; }
.rv-note img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 6px rgba(246, 212, 88, .6)); }
.rv-note .rv-h { color: var(--gold-hi); font-weight: bold; font-size: 14px; letter-spacing: .02em; }
.rv-note .rv-t { font-size: 13px; line-height: 1.35; color: var(--text); }
@keyframes rv-note-in { from { opacity: 0; transform: translate(-50%, -18px) scale(.92); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes rv-note-out { to { opacity: 0; transform: translate(-50%, -12px); } }

/* телефон: в верхней части экрана — окно обучения, плашку ставим ниже, над картой */
body.mobile .rv-note { top: 46%; max-width: 92vw; }
/* горизонталь: слева сверху окно обучения, справа сверху карточка героя — плашка внизу, по центру свободной части */
body.mobile.land .rv-note { top: auto; bottom: calc(var(--sb, 0px) + 64px); left: calc((var(--left, 60px) + min(330px, 44vw) + 100vw) / 2); max-width: calc(100vw - var(--left, 60px) - min(330px, 44vw) - 24px); }

[data-reveal="all"] .rv-st { margin-left: 4px; color: var(--gold-hi); }

/* «Запасы и запреты»: стрелка потока вместо числа */
.slot .fl { position: absolute; right: 3px; bottom: 1px; font-size: 11px; line-height: 1; text-shadow: 1px 1px 0 #000; }
.slot .fl.up { color: var(--green); }
.slot .fl.dn { color: var(--red); }
/* строка ресурсов: остальные товары компактной сеткой */
.res-more { display: flex; flex-wrap: wrap; gap: 2px 8px; padding-top: 5px; margin-top: 2px; border-top: 1px dotted rgba(20,10,4,0.6); max-width: 220px; }
.res-more span { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.res-more img { width: 18px; height: 18px; }
.res-more b { color: var(--gold-hi); }