/* CoinRun SLYSE — Telegram Mini App
   Все координаты — в системе макета 1080×1920: calc(N * var(--u)),
   где --u = ширина сцены / 1080 (выставляет app.js). */

@font-face { font-family: "PS2P"; src: url(fonts/press-start-2p-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: "PS2P"; src: url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Rubik"; font-weight: 500; src: url(fonts/rubik-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Rubik"; font-weight: 500; src: url(fonts/rubik-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik"; font-weight: 700; src: url(fonts/rubik-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Rubik"; font-weight: 700; src: url(fonts/rubik-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "RCond"; font-weight: 700; src: url(fonts/roboto-condensed-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "RCond"; font-weight: 700; src: url(fonts/roboto-condensed-latin-700-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --u: 0.36px;
  --mint: #63ddb4;
  --mint-2: #5fd8b0;
  --mint-dark: #04978a;
  --cell: #1eb696;
  --cyan: #3ae0af;
  --orange: #ff6700;
  --orange-2: #f77a25;
  --ink: #0d0d0d;
  --panel: #121212;
  --gold: #e3b03a;
  --lav: #e2a9f1;
  --edge: #3fd3a8;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--edge); overflow: hidden; }
body { font-family: "Rubik", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

/* ── viewport + сцена ── */
#root { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; background: var(--edge); transition: background-color .2s; }

#band { display: block; margin: 0 auto; width: calc(1080 * var(--u)); image-rendering: pixelated; pointer-events: none; }
#stage { position: relative; margin: 0 auto; width: calc(1080 * var(--u)); height: calc(1920 * var(--u)); overflow: hidden; }

.scr { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .16s ease, transform .2s ease, visibility 0s .2s; }
.scr.on { visibility: visible; opacity: 1; transition: opacity .16s ease, transform .2s ease, visibility 0s; }
.scr.from-left { transform: translateX(-6%); }
.scr .bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }

/* кликабельная зона по координатам макета */
.hs {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  border-radius: calc(24 * var(--u));
}
.hs:focus-visible, .btn:focus-visible { outline: calc(6 * var(--u)) solid #fff; outline-offset: calc(4 * var(--u)); }
.hs.press { transition: transform .08s, background-color .08s; }
.hs.press:active { transform: scale(.97); background: rgba(0, 0, 0, .08); }
.hs.glow:active { background: rgba(255, 255, 255, .12); }
.abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }

/* ── пиксельные тексты (Press Start 2P, как в макете) ── */
.px { font-family: "PS2P", monospace; line-height: 1; white-space: nowrap; letter-spacing: 0; }
.px-name { color: #f77a25; font-size: calc(35 * var(--u)); text-shadow: 0.060em 0.000em #1a0a00, -0.060em 0.000em #1a0a00, 0.000em 0.060em #1a0a00, 0.000em -0.060em #1a0a00, 0.060em 0.060em #1a0a00, -0.060em -0.060em #1a0a00, 0.060em -0.060em #1a0a00, -0.060em 0.060em #1a0a00; }
.px-num { color: var(--mint); font-size: calc(49 * var(--u)); text-shadow: 0.056em 0.000em #ff7520, -0.056em 0.000em #ff7520, 0.000em 0.056em #ff7520, 0.000em -0.056em #ff7520, 0.056em 0.056em #ff7520, -0.056em -0.056em #ff7520, 0.056em -0.056em #ff7520, -0.056em 0.056em #ff7520; }
.px-num.big { font-size: calc(71 * var(--u)); }
.px-name.big { font-size: calc(49 * var(--u)); }
:root {
  --o3k: calc(3*var(--u)) 0 #000, calc(-3*var(--u)) 0 #000, 0 calc(3*var(--u)) #000, 0 calc(-3*var(--u)) #000,
         calc(3*var(--u)) calc(3*var(--u)) #000, calc(-3*var(--u)) calc(-3*var(--u)) #000, calc(3*var(--u)) calc(-3*var(--u)) #000, calc(-3*var(--u)) calc(3*var(--u)) #000;
  --o4o: calc(4*var(--u)) 0 #ff7520, calc(-4*var(--u)) 0 #ff7520, 0 calc(4*var(--u)) #ff7520, 0 calc(-4*var(--u)) #ff7520,
         calc(4*var(--u)) calc(4*var(--u)) #ff7520, calc(-4*var(--u)) calc(-4*var(--u)) #ff7520, calc(4*var(--u)) calc(-4*var(--u)) #ff7520, calc(-4*var(--u)) calc(4*var(--u)) #ff7520;
  --o3l: calc(3*var(--u)) 0 var(--lav), calc(-3*var(--u)) 0 var(--lav), 0 calc(3*var(--u)) var(--lav), 0 calc(-3*var(--u)) var(--lav),
         calc(3*var(--u)) calc(3*var(--u)) var(--lav), calc(-3*var(--u)) calc(-3*var(--u)) var(--lav), calc(3*var(--u)) calc(-3*var(--u)) var(--lav), calc(-3*var(--u)) calc(3*var(--u)) var(--lav);
  --o3m: calc(3*var(--u)) 0 #0b2e27, calc(-3*var(--u)) 0 #0b2e27, 0 calc(3*var(--u)) #0b2e27, 0 calc(-3*var(--u)) #0b2e27,
         calc(3*var(--u)) calc(3*var(--u)) #0b2e27, calc(-3*var(--u)) calc(-3*var(--u)) #0b2e27, calc(3*var(--u)) calc(-3*var(--u)) #0b2e27, calc(-3*var(--u)) calc(3*var(--u)) #0b2e27;
}

/* ── слайды инструкции ── */
.stories { position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); top: calc(22 * var(--u)); display: flex; gap: calc(10 * var(--u)); z-index: 3; }
.stories i { flex: 1; height: calc(9 * var(--u)); background: rgba(0, 0, 0, .28); border-radius: calc(5 * var(--u)); overflow: hidden; }
.stories i::after { content: ""; display: block; height: 100%; width: 0; background: #0d0d0d; }
.stories i.done::after { width: 100%; }
.stories i.cur::after { width: 100%; background: var(--ink); animation: grow .35s ease-out; }
@keyframes grow { from { width: 0; } }
.tapzone { position: absolute; top: 0; bottom: 0; z-index: 2; }
.tapzone.prev { left: 0; width: 32%; }
.tapzone.next { right: 0; width: 68%; }
.fixpar {
  position: absolute; left: calc(40 * var(--u)); width: calc(1000 * var(--u)); top: calc(812 * var(--u));
  font-family: "PS2P", monospace; font-size: calc(33 * var(--u)); line-height: 1.46; text-align: center; color: #000;
  text-shadow: var(--o3l); white-space: normal; pointer-events: none;
}
.tap-hint { position: absolute; bottom: calc(40 * var(--u)); left: 0; right: 0; text-align: center; font-family: "PS2P"; font-size: calc(22 * var(--u)); color: #0d0d0d; opacity: .55; pointer-events: none; animation: blink 1.6s steps(2) infinite; z-index: 1; }
@keyframes blink { 50% { opacity: .2; } }

/* ── PLAY: лёгкое «дыхание» ── */
.play-pulse { animation: breathe 2.2s ease-in-out infinite; border-radius: calc(40 * var(--u)); }
@keyframes breathe { 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(255, 255, 255, .18); } }

/* ── статус квестов на таблице наград ── */
.stamp {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  font-family: "PS2P"; font-size: calc(19 * var(--u)); line-height: 1; padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(8 * var(--u)); pointer-events: none; white-space: nowrap;
}
.stamp.done { background: var(--ink); color: var(--cyan); }
.stamp.pending { background: var(--orange); color: #111; }
.stamp.go { background: rgba(13, 13, 13, .8); color: #ffd36a; }
.row-chevron { position: absolute; font-family: "PS2P"; font-size: calc(26 * var(--u)); color: #0d3b32; pointer-events: none; opacity: .55; }

/* ── скроллируемые области (лента, диалог) ── */
.scroll {
  position: absolute; left: 0; width: 100%; top: calc(var(--y) * var(--u)); height: calc(var(--h) * var(--u));
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(30 * var(--u)) 0 calc(40 * var(--u));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(30 * var(--u)), #000 calc(100% - 40 * var(--u)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(30 * var(--u)), #000 calc(100% - 40 * var(--u)), transparent 100%);
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* ── мятный пузырь-уведомление (как в макете) ── */
.bub { position: relative; width: calc(800 * var(--u)); margin: 0 0 calc(62 * var(--u)) calc(19 * var(--u)); padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u)); background: var(--mint); border-radius: calc(64 * var(--u)); animation: pop .28s ease-out both; }
.bub .tail { position: absolute; left: calc(-19 * var(--u)); bottom: calc(-6 * var(--u)); width: calc(120 * var(--u)); height: calc(122 * var(--u)); pointer-events: none; }
.bub .inner {
  position: relative; display: flex; min-height: calc(200 * var(--u)); background: var(--mint-2);
  border: calc(6 * var(--u)) solid var(--mint-dark);
  box-shadow: 0 0 0 calc(3 * var(--u)) #0b3a33, inset 0 0 0 calc(3 * var(--u)) #8cf3d3;
  clip-path: polygon(calc(9*var(--u)) 0, calc(100% - 9*var(--u)) 0, calc(100% - 9*var(--u)) calc(9*var(--u)), 100% calc(9*var(--u)), 100% calc(100% - 9*var(--u)), calc(100% - 9*var(--u)) calc(100% - 9*var(--u)), calc(100% - 9*var(--u)) 100%, calc(9*var(--u)) 100%, calc(9*var(--u)) calc(100% - 9*var(--u)), 0 calc(100% - 9*var(--u)), 0 calc(9*var(--u)), calc(9*var(--u)) calc(9*var(--u)));
}
.bub .ic { flex: 0 0 calc(156 * var(--u)); background: var(--cell) center / cover no-repeat; border-right: calc(4 * var(--u)) solid var(--mint-dark); display: flex; align-items: center; justify-content: center; }
.bub .ic img.coin { width: calc(110 * var(--u)); height: auto; }
.bub .tx { flex: 1; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); font-weight: 500; font-size: calc(37 * var(--u)); line-height: 1.17; color: #0b1a17; }
.bub .tx b, .hl { font-weight: 700; color: var(--orange); background: #f4cf8e; padding: 0 calc(4 * var(--u)); text-shadow: var(--o2k); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bub .tx small { display: block; margin-top: calc(10 * var(--u)); font-size: calc(24 * var(--u)); color: #145c4f; font-weight: 500; }
.bub.muted .inner { filter: saturate(.55); }
:root { --o2k: calc(2*var(--u)) 0 #2a1200, calc(-2*var(--u)) 0 #2a1200, 0 calc(2*var(--u)) #2a1200, 0 calc(-2*var(--u)) #2a1200; }
@keyframes pop { from { opacity: 0; transform: translateY(calc(30 * var(--u))) scale(.97); } }

/* ── оранжевые пузыри диалога (экран 12) ── */
.msg { position: relative; max-width: calc(620 * var(--u)); margin: 0 calc(14 * var(--u)) calc(70 * var(--u)); padding: calc(44 * var(--u)) calc(36 * var(--u)); background: var(--orange); border-radius: calc(56 * var(--u)); font-family: "PS2P"; font-size: calc(38 * var(--u)); line-height: 1.42; color: var(--cyan); text-shadow: var(--o3m); text-align: center; white-space: pre-wrap; word-break: break-word; animation: pop .28s ease-out both; user-select: text; -webkit-user-select: text; }
.msg.me { margin-left: auto; }
.msg.team { margin-right: auto; }
.msg .tail { position: absolute; bottom: calc(-4 * var(--u)); width: calc(120 * var(--u)); pointer-events: none; }
.msg.me .tail { right: calc(-14 * var(--u)); }
.msg.team .tail { left: calc(-14 * var(--u)); transform: scaleX(-1); }
.thread-day { text-align: center; font-family: "PS2P"; font-size: calc(18 * var(--u)); color: rgba(255, 255, 255, .6); margin: 0 0 calc(36 * var(--u)); }

/* ── поле ввода поддержки ── */
.ta {
  position: absolute; left: calc(88 * var(--u)); top: calc(1362 * var(--u)); width: calc(849 * var(--u)); height: calc(286 * var(--u));
  background: transparent; border: 0; outline: 0; resize: none; color: #fff; caret-color: var(--cyan);
  font: 500 calc(44 * var(--u)) / 1.3 "Rubik", sans-serif; padding: calc(30 * var(--u)) calc(22 * var(--u));
  user-select: text; -webkit-user-select: text;
}
.ta::placeholder { color: #fff; opacity: 1; }
.ta:focus::placeholder { opacity: .45; }
.counter { position: absolute; right: calc(160 * var(--u)); top: calc(1612 * var(--u)); font-family: "PS2P"; font-size: calc(16 * var(--u)); color: rgba(255, 255, 255, .45); pointer-events: none; }

/* ── нижние листы (квесты, магазин) ── */
.sheet-wrap { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .2s; }
.sheet-wrap.on { opacity: 1; visibility: visible; transition: opacity .18s, visibility 0s; }
.sheet {
  position: relative; width: 100%; max-height: 88%; overflow-y: auto; scrollbar-width: none;
  background: var(--panel); border-top: calc(8 * var(--u)) solid var(--cyan);
  padding: calc(56 * var(--u)) calc(54 * var(--u)) calc(70 * var(--u));
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  background-image: var(--noise-dark); background-size: calc(15.12 * var(--u) * 32) auto;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet-wrap.on .sheet { transform: none; }
.sheet .grab { position: absolute; top: calc(18 * var(--u)); left: 50%; width: calc(110 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(-55 * var(--u)); background: #3a3a3a; border-radius: 9px; }
.sheet .x { position: absolute; top: calc(30 * var(--u)); right: calc(30 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); font-family: "PS2P"; font-size: calc(34 * var(--u)); color: var(--cyan); }
.sh-title { font-family: "PS2P"; font-size: calc(40 * var(--u)); line-height: 1.35; color: var(--orange-2); text-shadow: var(--o3k); margin-right: calc(80 * var(--u)); }
.sh-sub { margin-top: calc(18 * var(--u)); font-family: "PS2P"; font-size: calc(24 * var(--u)); color: var(--cyan); line-height: 1.5; }
.sh-body { margin-top: calc(34 * var(--u)); font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.38; color: #e9f7f1; }
.sh-body ol, .sh-body ul { padding-left: calc(48 * var(--u)); }
.sh-body li { margin-bottom: calc(14 * var(--u)); }
.sh-body p + p { margin-top: calc(18 * var(--u)); }
.sh-body em { font-style: normal; color: var(--cyan); }
.sh-actions { margin-top: calc(48 * var(--u)); display: grid; gap: calc(26 * var(--u)); }
.balance-chip { display: inline-flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(26 * var(--u)); font-family: "PS2P"; font-size: calc(30 * var(--u)); color: var(--mint); text-shadow: var(--o3o); }
.balance-chip img { width: calc(54 * var(--u)); }
:root { --o3o: calc(3*var(--u)) 0 #ff7520, calc(-3*var(--u)) 0 #ff7520, 0 calc(3*var(--u)) #ff7520, 0 calc(-3*var(--u)) #ff7520; }

/* кнопка в стиле «ОТПРАВИТЬ СООБЩЕНИЕ» */
.btn {
  display: block; width: 100%; padding: calc(34 * var(--u)) calc(30 * var(--u)); background: var(--mint); color: #222;
  font: 700 calc(44 * var(--u)) / 1 "RCond", "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .01em; text-align: center;
  clip-path: polygon(calc(10*var(--u)) 0, calc(100% - 10*var(--u)) 0, calc(100% - 10*var(--u)) calc(10*var(--u)), 100% calc(10*var(--u)), 100% calc(100% - 10*var(--u)), calc(100% - 10*var(--u)) calc(100% - 10*var(--u)), calc(100% - 10*var(--u)) 100%, calc(10*var(--u)) 100%, calc(10*var(--u)) calc(100% - 10*var(--u)), 0 calc(100% - 10*var(--u)), 0 calc(10*var(--u)), calc(10*var(--u)) calc(10*var(--u)));
  box-shadow: inset 0 calc(-8 * var(--u)) 0 rgba(0, 0, 0, .18);
  transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(calc(3 * var(--u))); filter: brightness(.95); }
.btn.ghost { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--cyan); }
.btn.orange { background: var(--orange); color: #141414; }
.btn[disabled] { background: #2e3a37; color: #85a39b; box-shadow: none; cursor: default; transform: none; }
.btn small { display: block; margin-top: calc(10 * var(--u)); font: 500 calc(26 * var(--u)) "Rubik", sans-serif; text-transform: none; }

/* ── карточки товаров ── */
.lot { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; gap: calc(26 * var(--u)); align-items: center; margin-top: calc(30 * var(--u)); padding: calc(26 * var(--u)); background: #0b0b0b; border: calc(5 * var(--u)) solid var(--cyan); border-radius: calc(14 * var(--u)); }
.lot.off { opacity: .55; }
.lot .pic { width: calc(170 * var(--u)); height: calc(170 * var(--u)); background: #000 center / contain no-repeat; border-radius: calc(8 * var(--u)); }
.lot h4 { font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1.2; color: var(--cyan); }
.lot p { margin-top: calc(8 * var(--u)); font-weight: 500; font-size: calc(27 * var(--u)); line-height: 1.3; color: #b9d8cf; }
.lot .row { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); margin-top: calc(18 * var(--u)); }
.lot .price { display: flex; align-items: center; gap: calc(10 * var(--u)); font-family: "PS2P"; font-size: calc(26 * var(--u)); color: var(--gold); white-space: nowrap; }
.lot .price img { width: calc(40 * var(--u)); }
.lot .btn { width: auto; padding: calc(20 * var(--u)) calc(26 * var(--u)); font-size: calc(32 * var(--u)); }

/* ── разминка ── */
.timer { margin: calc(34 * var(--u)) 0 calc(10 * var(--u)); text-align: center; font-family: "PS2P"; font-size: calc(96 * var(--u)); color: var(--mint); text-shadow: var(--o4o); }
.ex { list-style: none; padding: 0 !important; counter-reset: ex; }
.ex li { display: flex; gap: calc(20 * var(--u)); align-items: baseline; padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(10 * var(--u)); color: #9dbdb4; }
.ex li::before { counter-increment: ex; content: counter(ex); font-family: "PS2P"; font-size: calc(24 * var(--u)); color: #4c6b63; }
.ex li.cur { background: rgba(58, 224, 175, .14); color: #fff; }
.ex li.cur::before { color: var(--cyan); }
.ex li.past { color: #5c7a72; text-decoration: line-through; }

/* ── тост ── */
#toast { position: absolute; left: 50%; bottom: calc(260 * var(--u)); z-index: 40; max-width: calc(940 * var(--u)); transform: translate(-50%, calc(30 * var(--u))); opacity: 0; pointer-events: none;
  padding: calc(28 * var(--u)) calc(34 * var(--u)); background: var(--ink); color: var(--cyan); border: calc(5 * var(--u)) solid var(--cyan); border-radius: calc(16 * var(--u));
  font: 500 calc(34 * var(--u)) / 1.3 "Rubik", sans-serif; text-align: center; transition: opacity .2s, transform .2s; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast b { color: var(--gold); }

/* кнопка «назад» вне Telegram (в Telegram — нативная BackButton) */
#webback { position: absolute; z-index: 15; left: calc(24 * var(--u)); top: calc(24 * var(--u)); width: calc(120 * var(--u)); height: calc(100 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--ink); color: var(--orange-2); font-family: "PS2P"; font-size: calc(40 * var(--u)); display: none; }
#webback.on { display: block; }

.demo-badge { position: absolute; z-index: 16; right: calc(20 * var(--u)); bottom: calc(14 * var(--u)); font-family: "PS2P"; font-size: calc(16 * var(--u)); color: rgba(0, 0, 0, .45); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

#supportList { padding-top: calc(140 * var(--u)); }
#supportList .bub { margin-bottom: calc(90 * var(--u)); }
#supportList .bub .tx { font-size: calc(42 * var(--u)); }