/* PEREHVAT — shared design system (v7 tokens, see design/_tokens.css) */
:root {
  --sky-top: #2f63c4; --sky-mid: #5f92e0; --sky-low: #a9c7f0;
  --card: #ffffff;
  --ink: #1c2b45; --ink-dim: #66748f;
  --teal: #0aa396;   /* team A — Волна */
  --rasp: #e83d72;   /* team B — Пульс */
  --violet: #8455e0; /* team C — Неон */
  --green: #1f9d55;  /* brand arrow + primary CTA only, not a team */
  --neutral: #97a1b5; --yellow: #f2c53d;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* the only family */
}

* { box-sizing: border-box; }

/* height:100% на body резал его в один экран: контент вытекал за коробку и
   padding-bottom не создавал места над нижним доком. Только min-height. */
html { height: 100%; }

body {
  margin: 0; min-height: 100vh; font-family: var(--font); color: #fff;
  background: var(--sky-mid);
}
/* Небо одним экраном, без тайлинга на длинных страницах: фиксированный
   слой на весь вьюпорт вместо background на растущем body. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(255, 255, 255, .2) 0%, transparent 50%),
    linear-gradient(180deg, var(--sky-top), var(--sky-mid) 58%, var(--sky-low));
}

/* ── logo — arrow (word + border-triangle tip) ───────────────────────── */
/* логотип часто обёрнут в ссылку — гасим подчёркивание и цвет визита */
a.logo-link, a.logo-link:visited, a:has(> .logo) {
  text-decoration: none; color: inherit;
}
.logo { display: inline-flex; align-items: center; filter: drop-shadow(0 6px 16px rgba(16, 38, 85, .4)); }
.logo .word {
  background: var(--green); color: #fff; font-weight: 700; font-style: italic;
  font-size: 14px; letter-spacing: .06em; padding: 7px 2px 7px 12px; border-radius: 5px 0 0 5px;
}
.logo .tip {
  width: 0; height: 0; border-top: 15.5px solid transparent; border-bottom: 15.5px solid transparent;
  border-left: 13px solid var(--green);
}
.logo.big .word { font-size: 27px; padding: 11px 6px 11px 22px; border-radius: 7px 0 0 7px; }
.logo.big .tip { border-top-width: 26.5px; border-bottom-width: 26.5px; border-left-width: 22px; }
.logo.big { filter: drop-shadow(0 12px 26px rgba(16, 38, 85, .45)); }

/* ── status pill ──────────────────────────────────────────────────────── */
.pill {
  background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 999px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 7px 14px; box-shadow: 0 8px 18px -8px rgba(16, 38, 85, .5);
}
.pill.warm { background: var(--yellow); color: #4d3c05; }
.pill.pause { color: var(--rasp); }

/* ── bottom tab bar with rolling bubble ───────────────────────────────── */
.tabs {
  max-width: 380px; margin: 0 auto; display: flex; background: rgba(255, 255, 255, .94);
  border-radius: 16px; padding: 6px; box-shadow: 0 14px 34px -12px rgba(16, 38, 85, .55);
  position: relative;
}
/* Фиксированный вариант — полноширинный непрозрачный док у нижнего края:
   ничего не перекрывает, контенту гарантирован отступ (см. body:has ниже). */
.tabs.fixed {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 560px; margin: 0 auto; /* на десктопе — компактный док по центру */
  border-radius: 16px 16px 0 0; background: #fff;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px -12px rgba(16, 38, 85, .45);
}
.tabs.fixed .bubble { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
/* каждая страница с доком дышит над ним, что бы она сама ни задала */
body:has(.tabs.fixed) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.bubble {
  position: absolute; top: 6px; bottom: 6px; width: calc((100% - 12px) / 4);
  background: var(--green); border-radius: 11px; z-index: 0;
  transition: left .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tab {
  flex: 1; text-align: center; padding: 9px 4px 7px; border-radius: 11px; text-decoration: none;
  color: var(--ink-dim); font-size: 11.5px; font-weight: 700; cursor: pointer; z-index: 1;
  transition: color .2s ease; display: block;
}
.tab .ic { display: block; font-size: 19px; margin-bottom: 2px; }
.tab.active { color: #fff; }

/* ── arrow button — one-piece clip-path, shine sweep, extending tip ──── */
.a-wrap { display: inline-block; position: relative; filter: drop-shadow(0 8px 16px rgba(16, 38, 85, .4)); }
.a-wrap.block { display: block; width: 100%; }
.arrow-btn {
  --tip: 16px; --c: var(--green);
  width: auto; font-family: var(--font); font-size: 15.5px; font-weight: 700; font-style: italic;
  letter-spacing: .04em; color: #fff; text-align: left; background: var(--c);
  border: 0; cursor: pointer; padding: 13px calc(var(--tip) + 16px) 13px 18px;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  position: relative; overflow: hidden;
  transition: padding-right .25s cubic-bezier(.34, 1.56, .64, 1);
}
.a-wrap.block .arrow-btn { width: 100%; }
.arrow-btn::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 48px; left: -80px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transition: left .45s ease;
}
.arrow-btn:hover { padding-right: calc(var(--tip) + 30px); }
.arrow-btn:hover::after { left: 130%; }
.arrow-btn:active { transform: translateX(4px) scaleX(.98); }
.shot {
  position: absolute; top: 50%; right: 0; width: 0; height: 0; pointer-events: none;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 12px solid var(--green); transform: translateY(-50%);
  animation: fly .5s ease-out forwards;
}
@keyframes fly { to { transform: translate(64px, -50%); opacity: 0; } }

/* ── grab — cut-corner plate button + release ring ────────────────────── */
.g-wrap { position: relative; display: inline-block; filter: drop-shadow(0 10px 20px rgba(16, 38, 85, .45)); }
.grab {
  --c: var(--rasp); --cut: 12px;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: #fff; background: var(--c); border: 0; padding: 12px 22px; cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .15s ease, filter .15s ease;
}
.grab:hover { transform: translateY(-2px); }
.grab:active { transform: scale(.95, .88); filter: brightness(1.12); }
.grab:disabled { background: rgba(255, 255, 255, .4); color: #7d89a3; transform: none; cursor: not-allowed; }
.ring-fx {
  position: absolute; inset: 0; pointer-events: none; border: 2.5px solid var(--rasp);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: ringout .5s ease-out forwards;
}
@keyframes ringout { to { transform: scale(1.25, 1.7); opacity: 0; } }

/* ── team color helpers — A=teal, B=rasp, C=violet ────────────────────── */
.t-A { color: var(--teal); }
.t-B { color: var(--rasp); }
.t-C { color: var(--violet); }
.bg-A { background: var(--teal); }
.bg-B { background: var(--rasp); }
.bg-C { background: var(--violet); }

/* ── shared card shell ─────────────────────────────────────────────────── */
.card {
  background: var(--card); color: var(--ink); border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 26px 50px -16px rgba(16, 38, 85, .5), 0 3px 8px rgba(16, 38, 85, .12);
}

.tagline {
  color: #fff; font-size: 22px; font-weight: 400; text-align: center;
  text-shadow: 0 2px 10px rgba(12, 32, 74, .55);
}