/* ═══════════════════════════════════════════════════════════════
   «Петербургский генератор шалостей» → /shalosti/
   Палитра и шрифты общие, из site.css. Всё под .shpage, чтобы
   классы баттла сюда не протекали.
   Открывают это с телефона на улице: крупный шрифт, цели от 48 px,
   вся страница влезает в экран без прокрутки.
   ═══════════════════════════════════════════════════════════════ */
/* html красим тоже: страница короткая, и без этого под контентом
   вылезала полоса базового фона из site.css */
html.shpage, body.shpage { height: auto; overflow-x: hidden; overflow-y: auto; }
html.shpage { background: #1b0203; }
body.shpage {
  min-height: 100svh; color: #f3e7d8; background: #1b0203;
  background-image: radial-gradient(120% 60% at 50% 0%, var(--red1) 0%, var(--red2) 24%, var(--red3) 56%, #1b0203 100%);
  background-attachment: fixed; font-family: var(--body);
  -webkit-overflow-scrolling: touch;
}
/* топор-курсор с баттла тут не нужен: здесь читают и жмут */
body.shpage, .shpage button, .shpage a { cursor: auto; }
.shpage button, .shpage a { cursor: pointer; }
/* по кнопкам лупят пальцем и подряд: выделение текста и серая подсветка мешают */
.shpage button, .shpage .ghostbtn, .shback { -webkit-tap-highlight-color: transparent; user-select: none; }

/* Полоса во всю ширину, ссылка по центру. Раньше ссылка сама была sticky и
   висела слева — inline-элемент в потоке body сдвигал заголовок вбок. */
.shbar {
  position: sticky; top: 0; z-index: 8; display: flex; justify-content: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px));
  background: rgba(20, 2, 3, .78); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245, 197, 24, .16);
}
.shback {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--yellow);
  border: 1px solid rgba(245, 197, 24, .34); border-radius: 999px;
}
.shback:hover { background: var(--yellow); color: #2a0405; }

.shwrap {
  position: relative; z-index: 5; max-width: 720px; margin: 0 auto;
  padding: 6px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sheyebrow {
  font-family: var(--disp); font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(245, 197, 24, .62); margin-top: 12px;
}
.shtitle {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase; line-height: .92;
  font-size: clamp(30px, 8vw, 54px); color: #fff; margin: 6px 0 0; letter-spacing: 1px;
}
.shtitle .y { color: var(--yellow); }
.shlead { max-width: 30em; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: rgba(243, 231, 216, .78); }

/* ─── кубик ─── */
.shdie { margin: 18px 0 4px; width: 96px; height: 96px; }
.shdie svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6)); transform-origin: 50% 50%; }
.shdie.rolling svg { animation: dieroll .72s cubic-bezier(.3, .8, .3, 1); }
@keyframes dieroll {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(220deg) scale(1.18); }
  70%  { transform: rotate(430deg) scale(.94); }
  100% { transform: rotate(540deg) scale(1); }
}
.shdie .pip { fill: #2a0405; }
.shdie .body { fill: #f4ead9; stroke: #2a0405; stroke-width: 3; }

/* ─── карточка шалости ─── */
.shcard {
  position: relative; width: 100%; margin: 18px 0 0; padding: 26px 22px 24px;
  background: linear-gradient(180deg, #1e0d0b, #150806);
  border: 1px solid rgba(245, 197, 24, .34); border-radius: 18px;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.shcard::before {
  content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(245, 197, 24, .18);
  border-radius: 12px; pointer-events: none;
}
.shcard.in { animation: cardin .34s cubic-bezier(.2, .9, .3, 1); }
@keyframes cardin {
  from { opacity: 0; transform: translateY(14px) rotate(-.7deg); }
  to   { opacity: 1; transform: none; }
}
.shtag {
  display: inline-block; font-family: var(--disp); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: #2a0405; background: var(--yellow);
  padding: 5px 12px; border-radius: 6px;
}
.shtext {
  margin: 16px 0 0; font-size: clamp(19px, 4.6vw, 26px); line-height: 1.34;
  font-weight: 600; color: #fff; text-wrap: balance;
}
.shnum {
  display: block; margin-top: 16px; font-family: var(--hand); font-size: 20px;
  color: rgba(245, 197, 24, .68); transform: rotate(-1.5deg);
}

/* ─── кнопки ─── */
/* у .startbtn из site.css потёки (.drip) свисают на 40 px ниже самой кнопки —
   без запаса снизу они наезжают на счётчик */
.shpage .startbtn { margin: 22px 0 44px; font-size: clamp(17px, 4vw, 22px);
  padding: 16px 42px; letter-spacing: 3px; }
.shcount { margin-top: 4px; font-family: var(--disp); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(243, 231, 216, .45); }
.shdone { margin-top: 10px; font-family: var(--hand); font-size: 21px; color: var(--yellow); }

.shnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.shnav .ghostbtn { font-size: 13px; padding: 12px 18px; min-height: 48px; }

@media (max-width: 420px) {
  .shdie { width: 78px; height: 78px; margin-top: 12px; }
  .shwrap { padding-left: 14px; padding-right: 14px; }
  .shcard { padding: 22px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .shdie.rolling svg, .shcard.in { animation: none; }
}