/* ==========================================================
   Строка Random — мини-апп розыгрышей @strokarandombot
   Дизайн-система. Bootstrap и Font Awesome больше не подключаются:
   всё своё, обе темы через токены.
   ========================================================== */

:root {
  --bg:      #F5F4F9;
  --surf:    #FFFFFF;
  --surf-2:  #ECEAF3;
  --surf-3:  #E3E0EE;
  --fg:      #131120;
  --fg-2:    #56526E;
  --fg-3:    #8A85A2;
  --line:    #E2DFEC;
  --line-2:  #D3CFE2;

  --acc:     #7C3AED;
  --acc-2:   #DB2777;
  --acc-dim: rgba(124, 58, 237, 0.10);
  --on-acc:  #FFFFFF;

  --ok:      #0E8F63;
  --ok-dim:  rgba(14, 143, 99, 0.11);
  --gold:    #A8780C;
  --gold-dim: rgba(168, 120, 12, 0.13);
  --warn:    #C2410C;
  --warn-dim: rgba(194, 65, 12, 0.10);
  --vpn:     #0E7490;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --dh: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #0A0912;
    --surf:    #16141F;
    --surf-2:  #201D2E;
    --surf-3:  #292539;
    --fg:      #F3F1F9;
    --fg-2:    #A8A2C0;
    --fg-3:    #726D8B;
    --line:    #2B2740;
    --line-2:  #383150;

    --acc:     #A78BFA;
    --acc-2:   #F472B6;
    --acc-dim: rgba(167, 139, 250, 0.14);
    --on-acc:  #17102B;

    --ok:      #34D399;
    --ok-dim:  rgba(52, 211, 153, 0.14);
    --gold:    #F0C560;
    --gold-dim: rgba(240, 197, 96, 0.14);
    --warn:    #FB923C;
    --warn-dim: rgba(251, 146, 60, 0.14);
    --vpn:     #22D3EE;
  }
}

:root[data-theme="dark"] {
  --bg: #0A0912; --surf: #16141F; --surf-2: #201D2E; --surf-3: #292539;
  --fg: #F3F1F9; --fg-2: #A8A2C0; --fg-3: #726D8B;
  --line: #2B2740; --line-2: #383150;
  --acc: #A78BFA; --acc-2: #F472B6; --acc-dim: rgba(167,139,250,.14); --on-acc: #17102B;
  --ok: #34D399; --ok-dim: rgba(52,211,153,.14);
  --gold: #F0C560; --gold-dim: rgba(240,197,96,.14);
  --warn: #FB923C; --warn-dim: rgba(251,146,60,.14);
  --vpn: #22D3EE;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 100%;
}

/* ---------- иконки ---------- */
.i {
  width: 19px; height: 19px; display: block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.i .f { fill: currentColor; stroke: none; }
.i.sm { width: 15px; height: 15px; }
.i.lg { width: 22px; height: 22px; }
.i.xl { width: 30px; height: 30px; }
.i.xxl { width: 46px; height: 46px; stroke-width: 1.35; }

/* ---------- прелоадер ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: grid; place-items: center; align-content: center; gap: 20px;
  transition: opacity .45s ease, visibility .45s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.morph {
  width: 84px; height: 84px;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  box-shadow: 0 0 44px -6px var(--acc-dim);
  animation: morph 3.4s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 22px; transform: rotate(0); }
  33% { border-radius: 50%; transform: rotate(120deg); }
  66% { border-radius: 10px 40px 10px 40px; transform: rotate(240deg); }
}
.load-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3);
}
.thin-bar { width: 168px; height: 3px; border-radius: 2px; background: var(--surf-2); overflow: hidden; }
.thin-bar i { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--acc), var(--acc-2)); animation: slide 1.5s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }

body.loading .app { opacity: 0; }
body.loaded .app { opacity: 1; transition: opacity .4s ease; }

/* ---------- карточки ---------- */
.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px;
  display: grid;
  gap: 12px;
}

.gw-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  line-height: 1.25; margin: 0; letter-spacing: -0.015em;
}

.gw-desc { margin: 0; font-size: .86rem; color: var(--fg-2); line-height: 1.5; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metric { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; }
.metric .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: var(--fg-3); }
.metric .v { font-family: var(--mono); font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.metric .v.acc { color: var(--acc); }
.metric .v.gold { color: var(--gold); }

/* ---------- призовая лесенка ---------- */
.ladder { display: grid; gap: 7px; }
.rung {
  display: grid; grid-template-columns: 30px 22px 1fr; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf);
  opacity: 0; transform: translateX(-8px); animation: rung-in .45s cubic-bezier(.2,1,.3,1) forwards;
}
@keyframes rung-in { to { opacity: 1; transform: none; } }
.rung .place {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .75rem;
  border: 1px solid var(--line); background: var(--surf-2); color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.rung.p1 .place { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }
.rung.p2 .place { color: var(--fg); border-color: var(--line-2); }
.rung.p3 .place { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
.rung.rest { border-style: dashed; }
.rung.rest .place { font-size: .6rem; letter-spacing: -.02em; }
.rung .pic { color: var(--acc); display: grid; place-items: center; }
.rung.p1 .pic, .rung.p2 .pic { color: var(--gold); }
.rung .nm b { display: block; font-size: .79rem; font-weight: 600; line-height: 1.25; }
.rung .nm span { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- таймер ---------- */
.timer {
  display: grid; gap: 9px; padding: 13px 12px 11px;
  background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .4s;
}
.t-row { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.t-sep {
  align-self: center; transform: translateY(-6px);
  font-family: var(--mono); font-weight: 700; font-size: 1.1rem; color: var(--fg-3);
  padding-bottom: 12px; animation: sep-blink 1s steps(1, end) infinite;
}
@keyframes sep-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: .2; } }
.tcell { display: grid; justify-items: center; gap: 4px; padding: 0 9px; }
.tcell .lbl { font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.roll { display: flex; gap: 1px; height: var(--dh); overflow: hidden; }
.dig { display: block; width: .66em; height: var(--dh); overflow: hidden; font-family: var(--mono); font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.dig .col { display: block; will-change: transform; transition: transform .58s cubic-bezier(.22,1.18,.34,1); }
.dig i { display: block; height: var(--dh); line-height: var(--dh); font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.tcell.pulse { animation: t-pulse .6s ease-out; }
@keyframes t-pulse {
  0% { box-shadow: 0 0 0 0 var(--acc-dim); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.t-bar { height: 3px; border-radius: 2px; background: var(--surf-3); overflow: hidden; }
.t-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--acc), var(--acc-2)); transition: width 1s linear, background .5s; }
.timer.hot { border-color: var(--warn); }
.timer.hot .dig, .timer.hot .t-sep { color: var(--warn); }
.timer.hot .t-bar i { background: var(--warn); }
.timer.ended .dig { color: var(--fg-3); }

/* ---------- условия ---------- */
/* Правило: карточка всегда тихая. Цветом кричит только то, что требует действия. */
.cond-progress { display: grid; gap: 6px; }
.cond-progress .bar { height: 7px; border-radius: 4px; background: var(--surf-2); border: 1px solid var(--line); overflow: hidden; }
.cond-progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc-2)); transition: width .55s cubic-bezier(.3,1,.4,1); }
.cond-progress .lbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .65rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }

.conds { display: grid; gap: 8px; }
.cond {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surf); transition: border-color .35s, background .35s;
}
.cond .ic { color: var(--fg-3); transition: color .35s; }
.cond .ic .i { width: 21px; height: 21px; }
.cond .tx { min-width: 0; }
.cond .tx b { display: block; font-size: .81rem; font-weight: 600; line-height: 1.25; }
.cond .tx span { font-size: .71rem; color: var(--fg-3); font-family: var(--mono); }
.cond .go {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  border: 0; color: var(--on-acc); background: linear-gradient(96deg, var(--acc), var(--acc-2));
  border-radius: 100px; padding: 6px 13px; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.cond .st { width: 22px; display: grid; place-items: center; color: var(--fg-3); }
.cond.done .ic, .cond.done .st { color: var(--ok); }
.cond.checking .ic { color: var(--acc); }
.cond.fail { border-color: var(--line-2); }
.cond.unknown .st { color: var(--fg-3); }

.ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--line-2); }
.ring .fg { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 57; stroke-dashoffset: 57; transition: stroke-dashoffset .55s cubic-bezier(.4,0,.2,1); }

/* ---------- кнопки ---------- */
.btn {
  flex: 0 0 auto; min-height: 50px;
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  border: 0; border-radius: 100px; padding: 14px 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; position: relative; overflow: hidden;
  transition: transform .14s ease, filter .2s;
  text-decoration: none;
}
.btn:active { transform: scale(.985); }
.btn-acc { background: linear-gradient(96deg, var(--acc), var(--acc-2)); color: var(--on-acc); }
.btn-acc:disabled { filter: grayscale(.7) opacity(.45); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); pointer-events: none; animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ---------- сообщения ---------- */
.msg {
  border-radius: var(--r-md); padding: 12px 13px; font-size: .82rem; line-height: 1.45;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--line-2);
}
.msg .m { font-weight: 700; font-family: var(--mono); }
.msg b { display: block; margin-bottom: 2px; }
.msg.ok { background: var(--ok-dim); }
.msg.ok .m { color: var(--ok); }
.msg.warn { background: var(--warn-dim); }
.msg.warn .m { color: var(--warn); }
.msg.err { background: var(--warn-dim); }
.msg.err .m { color: var(--warn); }
.msg.hidden { display: none; }

.hint { font-size: .76rem; color: var(--fg-3); text-align: center; margin: 0; line-height: 1.45; }
.hint.left { text-align: left; }

/* ---------- капча ---------- */
.cap-top { display: flex; align-items: center; gap: 8px; }
.cap-top h4 { font-family: var(--display); font-size: .9rem; font-weight: 600; margin: 0; }
.cap-top .tgt { color: var(--acc); }

.em-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.em-cell {
  aspect-ratio: 1; display: grid; place-items: center; color: var(--fg-2);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; position: relative; padding: 0;
  transition: transform .15s, border-color .2s, background .2s, color .2s;
}
.em-cell:active { transform: scale(.94); }
.em-cell.hit { border-color: var(--ok); background: var(--ok-dim); color: var(--ok); animation: pop .4s cubic-bezier(.2,1.5,.4,1); }
.em-cell.no { animation: nope .32s ease; border-color: var(--warn); color: var(--warn); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes nope { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.spark { position: absolute; pointer-events: none; color: var(--acc); animation: spark .75s ease-out forwards; }
@keyframes spark { 0% { opacity: 1; transform: translate(0,0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25); } }

.gift-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.gift { width: 44px; height: 44px; display: grid; place-items: center; color: var(--acc); background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; padding: 0; }
.gift.fly { animation: fly .62s cubic-bezier(.5,-0.25,.4,1) forwards; }
@keyframes fly {
  0% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(.35) rotate(26deg); opacity: 0; }
}
.box {
  border: 2px dashed var(--line-2); border-radius: var(--r-md); min-height: 118px;
  display: grid; place-items: center; gap: 5px; padding: 12px; background: var(--surf);
  transition: border-color .3s, background .3s; color: var(--fg-2);
}
.box.live { border-color: var(--acc); background: var(--acc-dim); }
.box.jump .bi { animation: jump .36s ease; }
@keyframes jump { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-7px) scale(1.12); } }
.box .bl { font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3); }
.landed { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.landed span { display: block; color: var(--acc); animation: land .42s cubic-bezier(.2,1.6,.4,1); }
@keyframes land { 0% { transform: scale(0) rotate(-35deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- подтверждение ---------- */
.confirm { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 10px 0; }
.check-badge {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--ok-dim); border: 2px solid var(--ok);
  display: grid; place-items: center; transform: scale(0);
  animation: badge .62s cubic-bezier(.2,1.5,.35,1) .15s forwards;
}
@keyframes badge {
  0% { transform: scale(0) rotate(-25deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.check-badge svg { width: 38px; height: 38px; }
.check-badge path {
  fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .45s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm .big { font-family: var(--display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* ---------- победители ---------- */
.win {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf);
  opacity: 0; transform: translateY(12px) scale(.97); filter: blur(4px);
  animation: win-in .55s cubic-bezier(.2,1,.3,1) forwards;
}
@keyframes win-in { to { opacity: 1; transform: none; filter: blur(0); } }
.win .p { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: .78rem; background: var(--surf-2); border: 1px solid var(--line); }
.win.gold .p { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.win .n { font-size: .84rem; font-weight: 600; word-break: break-word; }
.win .prize-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .61rem; color: var(--fg-3); white-space: nowrap; }
.win .prize-tag .i { width: 14px; height: 14px; }
.win.gold .prize-tag { color: var(--gold); }

/* ---------- шапка и мелочи ---------- */
.kicker { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.hero-stat {
  font-family: var(--display); font-weight: 800; font-size: 3rem; letter-spacing: -.05em;
  line-height: .95; font-variant-numeric: tabular-nums;
  background: linear-gradient(96deg, var(--acc), var(--acc-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps { display: grid; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: .82rem; padding: 9px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-8px); animation: sl-in .45s cubic-bezier(.2,1,.3,1) forwards; }
.step:last-child { border-bottom: 0; }
@keyframes sl-in { to { opacity: 1; transform: none; } }
.step i { font-style: normal; font-family: var(--mono); font-size: .62rem; font-weight: 700; color: var(--acc); border: 1px solid var(--acc); border-radius: 5px; text-align: center; padding: 1px 0; }

.err-code {
  font-family: var(--display); font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em;
  line-height: 1; font-variant-numeric: tabular-nums; text-align: center;
  background: linear-gradient(96deg, var(--acc), var(--acc-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.centered { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px 0; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}