/* ═════════ СпасиТимура ═════════ */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --grad: linear-gradient(92deg, #ff5ecd, #a855f7 45%, #38bdf8);
  --pink:#ff5ecd; --violet:#a855f7; --blue:#38bdf8;
  --ink:#0e1220; --panel:rgba(14,18,32,.62);
}
html, body { height:100%; overflow-x:hidden; }
body {
  font-family:'Manrope', sans-serif;
  background:#0e1220; color:#fff;
  min-height:100vh;
}

/* ── сцена ── */
.scene { position:fixed; inset:0; overflow:hidden; z-index:0; }
.scene-bg, .head-layer { position:absolute; transform-origin:top left; }
.scene-bg { will-change:left,top,width; }
.head-layer img {
  width:100%; height:100%; display:block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  transition: filter .6s;
}
.head-layer.magic img { animation: magicSwap 1.6s ease; }
@keyframes magicSwap {
  0%   { filter: brightness(1) saturate(1); }
  30%  { filter: brightness(2.2) saturate(0) blur(6px); }
  60%  { filter: brightness(1.6) saturate(1.6) blur(2px); }
  100% { filter: brightness(1) saturate(1) blur(0); }
}
.head-loading {
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(160,220,255,.18); backdrop-filter: blur(3px);
  border-radius:20px;
}
.head-layer.loading .head-loading { display:flex; }
.pill-spinner { font-size:44px; animation: spinPill 1s linear infinite; filter: drop-shadow(0 0 14px #38bdf8); }
@keyframes spinPill { to { transform: rotate(360deg); } }
.loading-text {
  font-family:'Unbounded'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.7); animation: pulseTxt 1.2s ease infinite;
}
@keyframes pulseTxt { 50% { opacity:.45; } }

.vignette { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(8,10,20,.55) 100%); }

/* хотспоты */
.hotspot {
  position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; cursor:pointer; z-index:5;
  background: radial-gradient(circle, rgba(255,94,205,.95) 0%, rgba(168,85,247,.55) 60%, transparent 70%);
  animation: hspulse 1.8s ease infinite;
  transition: transform .2s;
}
.hotspot::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border: 1.5px solid rgba(255,94,205,.7); animation: hsring 1.8s ease infinite;
}
.hotspot:hover { transform: scale(1.45); }
.hotspot.done { background: radial-gradient(circle, rgba(74,222,128,.95) 0%, rgba(34,197,94,.5) 60%, transparent 70%); }
.hotspot.done::after { border-color: rgba(74,222,128,.7); }
@keyframes hspulse { 50% { opacity:.55; } }
@keyframes hsring { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(1.5); opacity:0; } }

.hotspot-tam {
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  z-index:5; cursor:pointer; font-size:26px;
  filter: drop-shadow(0 0 10px rgba(255,94,205,.8));
  animation: hspulse 1.8s ease infinite;
}
.hotspot-tam:hover { transform:translateX(-50%) scale(1.3); }

.tooltip {
  position:fixed; z-index:60; pointer-events:none; opacity:0; transform: translate(-50%,-115%) scale(.9);
  transition: opacity .18s, transform .18s;
  background: rgba(10,12,24,.92); border:1px solid rgba(255,255,255,.15);
  padding:10px 14px; border-radius:14px; backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 20px rgba(168,85,247,.25);
  text-align:center; white-space:nowrap;
}
.tooltip.show { opacity:1; transform: translate(-50%,-125%) scale(1); }
.tooltip .tt-name { font-weight:800; font-size:13px; }
.tooltip .tt-pct { font-family:'Unbounded'; font-size:20px; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tooltip .tt-bar { height:5px; width:130px; margin:6px auto 2px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.tooltip .tt-fill { height:100%; border-radius:3px; background:var(--grad); }
.tooltip .tt-money { font-size:10.5px; opacity:.65; margin-top:3px; }

/* дождь из таблеток */
.pills-rain { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pill-drop { position:absolute; top:-60px; animation: pillFall linear infinite; opacity:.5; }
@keyframes pillFall {
  to { transform: translateY(115vh) rotate(340deg); }
}

/* ── UI ── */
.ui { position:relative; z-index:10; min-height:100vh; pointer-events:none; }
.ui > * { pointer-events:auto; }

.glass {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.hero { text-align:center; padding:26px 16px 0; animation: fadeDown .9s ease both; }
@keyframes fadeDown { from { opacity:0; transform:translateY(-24px); } }
.badge-live {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.18em;
  background:rgba(239,68,68,.16); border:1px solid rgba(239,68,68,.5);
  color:#fca5a5; padding:7px 14px; border-radius:999px; margin-bottom:14px;
  backdrop-filter: blur(8px);
}
.badge-live .dot { width:8px; height:8px; border-radius:50%; background:#ef4444; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity:.2; } }
.title {
  font-family:'Unbounded'; font-weight:900; font-size: clamp(26px, 4.4vw, 54px);
  line-height:1.05; text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.title .grad, .grad {
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation: gradMove 3s linear infinite;
}
@keyframes gradMove { to { background-position:200% center; } }
.subtitle { margin-top:10px; font-size:14px; font-weight:600; opacity:.85; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.drug-badge {
  display:inline-block; margin-top:14px; padding:10px 18px; font-size:13px; font-weight:700;
  border-radius:999px; border-color: rgba(56,189,248,.45);
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 0 22px rgba(56,189,248,.25);
  animation: drugFloat 3.2s ease-in-out infinite;
}
/* на десктопе — стикером в левом нижнем углу, чтобы не закрывать голову */
@media (min-width: 1101px) {
  .drug-badge {
    position:fixed; left:22px; bottom:22px; margin:0; max-width:250px;
    border-radius:18px; transform: rotate(-3deg); z-index:20; text-align:left;
  }
  @keyframes drugFloat { 50% { transform: rotate(-3deg) translateY(-5px); } }
}
.drug-badge b { color: var(--blue); }
.drug-note { display:block; font-size:9.5px; opacity:.5; font-weight:600; margin-top:2px; }
@keyframes drugFloat { 50% { transform: translateY(-5px); } }
.pay-hint { font-size:12px; opacity:.75; text-align:center; margin-top:10px; line-height:1.5; }
.input.error, .chips.error {
  border-color:#ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.2) !important;
  animation: shake .45s ease;
}
.chips.error { border:1.5px solid #ef4444; border-radius:14px; padding:6px; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}
#qrBox { position:relative; width:230px; height:230px; border-radius:18px; background:#fff; padding:15px; display:flex; align-items:center; justify-content:center; }
#qrBox img, #qrBox canvas { width:200px !important; height:200px !important; image-rendering: pixelated; }

/* панель частей */
.parts-panel {
  position:fixed; left:22px; top:50%; transform:translateY(-50%);
  width: 265px; padding:16px; z-index:20;
  animation: fadeLeft .9s .2s ease both;
}
@keyframes fadeLeft { from { opacity:0; transform:translate(-30px,-50%); } to { opacity:1; transform:translate(0,-50%);} }
.parts-title { font-family:'Unbounded'; font-size:12px; letter-spacing:.1em; margin-bottom:12px; opacity:.9; }
.part-card {
  padding:9px 11px; border-radius:14px; cursor:pointer; margin-bottom:7px;
  border:1px solid transparent; transition: .2s;
}
.part-card:hover { background:rgba(255,255,255,.08); border-color:rgba(255,94,205,.4); transform:translateX(4px); }
.part-card .pc-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; }
.part-card .pc-pct { font-family:'Unbounded'; font-size:12px; }
.part-card .pc-bar { height:6px; margin-top:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.part-card .pc-fill { height:100%; border-radius:3px; background:var(--grad); width:0; transition: width 1s cubic-bezier(.2,.9,.3,1.2); position:relative; }
.part-card .pc-money { font-size:10.5px; opacity:.55; margin-top:4px; }
.part-card.done .pc-fill { background: linear-gradient(90deg,#22c55e,#4ade80); }
.part-card.done .pc-pct { color:#4ade80; }

/* нижняя панель */
.bottom-bar {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  width:min(560px, calc(100vw - 44px)); padding:18px 22px; z-index:20; text-align:center;
  animation: fadeUp .9s .3s ease both;
}
@keyframes fadeUp { from { opacity:0; transform:translate(-50%,30px); } to { opacity:1; transform:translate(-50%,0);} }
.total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.total-num { font-family:'Unbounded'; font-weight:900; font-size:26px; }
.total-goal { font-size:12px; opacity:.6; font-weight:700; }
.total-progress { height:14px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:14px; }
.total-fill { height:100%; width:0; border-radius:8px; background:var(--grad); position:relative; transition: width 1.2s cubic-bezier(.2,.9,.3,1.15); }
.shine { position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size:200% 100%; animation: shineMove 2s linear infinite; }
@keyframes shineMove { to { background-position:-200% 0; } }
.cta {
  font-family:'Unbounded'; font-weight:800; font-size:15px; color:#fff;
  border:none; cursor:pointer; padding:15px 34px; border-radius:16px;
  background: var(--grad); background-size:200% auto;
  box-shadow: 0 8px 30px rgba(168,85,247,.55), 0 0 0 0 rgba(255,94,205,.6);
  animation: gradMove 3s linear infinite, ctaPulse 2s ease infinite;
  transition: transform .15s;
}
.cta:hover { transform: scale(1.05) rotate(-1deg); }
.cta:active { transform: scale(.97); }
@keyframes ctaPulse { 50% { box-shadow: 0 8px 30px rgba(168,85,247,.55), 0 0 0 14px rgba(255,94,205,0); } }

/* фид */
.feed {
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  width:295px; max-height:62vh; padding:16px; z-index:20;
  display:flex; flex-direction:column;
  animation: fadeRight .9s .2s ease both;
}
@keyframes fadeRight { from { opacity:0; transform:translate(30px,-50%); } to { opacity:1; transform:translate(0,-50%);} }
.feed-title { font-family:'Unbounded'; font-size:12px; letter-spacing:.1em; margin-bottom:12px; }
.feed-list { overflow-y:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:8px; }
.feed-empty { font-size:12.5px; opacity:.55; text-align:center; padding:18px 6px; line-height:1.7; }
.feed-item {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:10px 12px; animation: feedIn .5s ease both;
}
@keyframes feedIn { from { opacity:0; transform:translateX(24px) scale(.95); } }
.fi-head { display:flex; justify-content:space-between; align-items:center; }
.fi-name { font-weight:800; font-size:13px; }
.fi-sum { font-family:'Unbounded'; font-size:12px; color:#4ade80; font-weight:800; }
.fi-part { font-size:10.5px; margin-top:2px; color:var(--pink); font-weight:700; }
.fi-comment { font-size:12px; opacity:.8; margin-top:5px; line-height:1.45; word-break:break-word; }

/* ── модалка ── */
.modal-backdrop {
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center;
  background: rgba(6,8,16,.7); backdrop-filter: blur(10px);
}
.modal-backdrop.open { display:flex; animation: bdIn .25s ease; }
@keyframes bdIn { from { opacity:0; } }
.modal {
  position:relative; width:min(460px, calc(100vw - 32px));
  max-height:88vh; overflow-y:auto; scrollbar-width:thin;
  padding:30px 28px; animation: modalIn .4s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes modalIn { from { opacity:0; transform: scale(.85) translateY(30px); } }
.modal-x {
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  color:#fff; font-size:15px; cursor:pointer; transition:.2s;
}
.modal-x:hover { background:rgba(239,68,68,.35); transform: rotate(90deg); }
.modal-title { font-family:'Unbounded'; font-size:20px; line-height:1.3; margin-bottom:6px; text-align:center; }
.modal-sub { font-size:13px; opacity:.75; text-align:center; margin-bottom:16px; }
.field-label { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin:14px 0 6px; }
.field-label .hint { text-transform:none; letter-spacing:0; opacity:.7; font-weight:600; }
.input {
  width:100%; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14);
  border-radius:12px; color:#fff; padding:12px 14px; font-family:'Manrope'; font-size:14px; font-weight:600;
  outline:none; transition:.2s; resize:none;
}
.input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,94,205,.15); }
.chips { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:14px 0 4px; }
.chip {
  border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:800;
  cursor:pointer; transition:.18s; font-family:'Manrope';
}
.chip:hover { border-color: var(--pink); transform: translateY(-2px); }
.chip.active { background: var(--grad); border-color:transparent; box-shadow:0 4px 18px rgba(168,85,247,.5); }
.chip.full { opacity:.45; cursor:not-allowed; }
.part-card.locked { cursor:not-allowed; }
.part-card.locked:hover { transform:none; border-color:rgba(74,222,128,.35); }
.grow-preview {
  min-height:20px; text-align:center; font-size:12.5px; font-weight:700; color:#4ade80;
  margin-top:10px; transition:.3s;
}
.presets { display:flex; gap:7px; margin-bottom:8px; }
.preset {
  flex:1; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; border-radius:10px; padding:9px 0; font-weight:800; font-size:12px; cursor:pointer; transition:.18s;
}
.preset:hover { border-color:var(--blue); }
.preset.active { background:rgba(56,189,248,.25); border-color:var(--blue); }
.char-counter { font-size:11px; text-align:right; opacity:.55; margin-top:4px; }
.char-counter.ok { color:#4ade80; opacity:1; }
.btn-primary {
  width:100%; margin-top:16px; font-family:'Unbounded'; font-weight:800; font-size:14px;
  color:#fff; border:none; cursor:pointer; padding:14px; border-radius:14px;
  background: var(--grad); background-size:200% auto; animation: gradMove 3s linear infinite;
  box-shadow: 0 6px 24px rgba(168,85,247,.45); transition: transform .15s, opacity .2s;
}
.btn-primary:hover:not(:disabled) { transform: scale(1.03); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; animation:none; background:#555a6e; box-shadow:none; }
.btn-ghost {
  width:100%; margin-top:8px; background:none; border:none; color:rgba(255,255,255,.6);
  font-family:'Manrope'; font-weight:700; font-size:13px; cursor:pointer; padding:8px;
}
.btn-ghost:hover { color:#fff; }

.qr-wrap { position:relative; width:230px; height:230px; margin:6px auto 4px; }
.qr-glow { position:absolute; inset:-14px; border-radius:26px; background:var(--grad); filter:blur(26px); opacity:.55; animation: qrPulse 2.4s ease infinite; }
@keyframes qrPulse { 50% { opacity:.25; } }
.qr-wrap img, .qr-wrap canvas { position:relative; width:230px; height:230px; border-radius:18px; background:#fff; padding:10px; object-fit:contain; }

.oath-emoji, .success-emoji { font-size:56px; text-align:center; margin-bottom:10px; animation: bounceIn .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bounceIn { from { transform:scale(0); } }
.oath-input { text-align:center; font-size:16px; font-weight:800; margin-top:6px; }
.oath-input.valid { border-color:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.2); }

#confetti { position:fixed; inset:0; z-index:200; pointer-events:none; }

/* тосты */
.toast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-80px);
  z-index:300; background:rgba(10,12,24,.95); border:1px solid rgba(255,94,205,.5);
  border-radius:14px; padding:13px 22px; font-weight:800; font-size:13.5px;
  box-shadow:0 10px 40px rgba(0,0,0,.6); transition: transform .4s cubic-bezier(.2,.9,.3,1.3);
  max-width: 90vw; text-align:center;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── мобилка: фото Тимура сверху целиком, ничего его не перекрывает ── */
@media (max-width: 1100px) {
  body { background:#0e1220; }
  .scene { position:relative; width:100vw; }
  .vignette { display:none; }
  .ui { min-height:0; display:flex; flex-direction:column; }
  .hero { padding-top:20px; }
  .hotspot { width:14px; height:14px; margin:-7px 0 0 -7px; }
  .hotspot::after { inset:-5px; border-width:1px; }
  .hotspot-tam { font-size:20px; }
  .parts-panel { position:static; transform:none; width:auto; margin:20px 16px 0; animation:fadeUp2 .9s .2s both; }
  .bottom-bar { position:static; transform:none; width:auto; margin:14px 16px 0; animation:fadeUp2 .9s .25s both; }
  .feed { position:static; transform:none; width:auto; max-height:340px; margin:14px 16px 30px; animation:fadeUp2 .9s .3s both; }
  @keyframes fadeUp2 { from { opacity:0; transform:translateY(24px); } }
}