/* =========================================================
   GOY MINI APP — «сделал свой пацан на коленке»
   Картон, драная бумага, скотч, маркер и мемы.
   Никаких внешних файлов: все текстуры — inline SVG.
   ========================================================= */

:root{
  /* материалы */
  --wall:#0C0B0A;
  --paper:#EDE4CE;
  --paper-2:#DFD3B6;
  --cardboard:#A88C63;
  --cardboard-2:#8B7049;
  --board:#171A1C;
  --note:#F2DE8C;

  /* чернила */
  --ink:#241D16;
  --ink-soft:#5B4A33;
  --chalk:#E8E4DA;
  --chalk-soft:#9BA1A6;

  /* маркеры */
  --marker:#7C4DFF;
  --marker-2:#5B34D6;
  --red:#D93636;
  --green:#2F9E44;
  --gold:#E8B03A;

  --nav-h:74px;
  --safe-b:env(safe-area-inset-bottom,0px);

  --hand:'Bradley Hand','Marker Felt','Noteworthy','Chalkboard SE',
         'Comic Sans MS','Segoe Print','Ink Free',cursive;
  --type:'Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* зерно поверх материалов */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}

html,body{
  margin:0;padding:0;
  background:var(--wall);
  color:var(--chalk);
  font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

body{
  min-height:100vh;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 26px);
  position:relative;
  overflow-x:hidden;
}

/* тёмная стена с зерном и виньеткой */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:var(--grain);
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;z-index:0;
}
body::after{
  content:"";
  position:fixed;inset:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(124,77,255,.10) 0%,transparent 60%),
             radial-gradient(100% 60% at 50% 100%,rgba(0,0,0,.55) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}

.app{
  position:relative;z-index:1;
  padding:12px 14px 0;
  max-width:560px;margin:0 auto;
}

/* ===================== МАТЕРИАЛЫ ===================== */

.meme,.meme img{background:none;}

.paper,.cardboard,.board,.note{
  position:relative;
  isolation:isolate;
}

.paper::after,.cardboard::after,.board::after,.note::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.3;mix-blend-mode:multiply;
  pointer-events:none;z-index:-1;
}

.paper{
  background:
    linear-gradient(160deg,rgba(255,255,255,.5),transparent 45%),
    linear-gradient(0deg,rgba(120,95,60,.16),transparent 30%),
    var(--paper);
  color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}

/* Фотофактура картона поверх заливки: если картинка не подгрузится,
   останется прежний процедурный картон, а не дыра. */
.cardboard{
  /* первое объявление — для вебвью без image-set: оно просто выигрывает
     каскад там, где второе не разобралось */
  background:
    linear-gradient(165deg,rgba(255,240,210,.16),transparent 55%),
    linear-gradient(0deg,rgba(60,40,20,.26),transparent 42%),
    url("textures/carton.jpg"),
    var(--cardboard);
  background:
    linear-gradient(165deg,rgba(255,240,210,.16),transparent 55%),
    linear-gradient(0deg,rgba(60,40,20,.26),transparent 42%),
    image-set(url("textures/carton.webp") type("image/webp"),
              url("textures/carton.jpg") type("image/jpeg")),
    var(--cardboard);
  background-size:auto, auto, cover, auto;
  background-position:center;
  color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.6);
}

.board{
  background:
    radial-gradient(80% 60% at 30% 20%,rgba(255,255,255,.05),transparent 70%),
    var(--board);
  color:var(--chalk);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5);
}

.note{
  background:linear-gradient(160deg,#F7E9A0,var(--note));
  color:var(--ink);
  box-shadow:0 5px 14px rgba(0,0,0,.5);
}

/* драные края */
.torn{
  clip-path:polygon(
    0 5px, 7% 0, 15% 4px, 24% 1px, 33% 5px, 42% 0, 51% 4px, 60% 1px,
    69% 5px, 78% 0, 87% 4px, 95% 1px, 100% 5px,
    100% calc(100% - 4px), 94% 100%, 86% calc(100% - 5px), 77% 100%,
    68% calc(100% - 2px), 59% 100%, 50% calc(100% - 5px), 41% 100%,
    32% calc(100% - 3px), 23% 100%, 14% calc(100% - 5px), 6% 100%,
    0 calc(100% - 3px)
  );
}

/* скотч по углам */
.taped::before,.taped::after{
  content:"";position:absolute;
  width:70px;height:21px;top:-10px;z-index:4;
  background:linear-gradient(180deg,rgba(255,252,228,.5),rgba(226,214,172,.32));
  border-left:1px solid rgba(255,255,255,.3);
  border-right:1px solid rgba(0,0,0,.15);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.taped::before{left:14px;transform:rotate(-7deg);}
.taped::after{right:14px;transform:rotate(6deg);}

.tilt-l{--tilt:-.7deg;transform:rotate(var(--tilt));}
.tilt-r{--tilt:.6deg;transform:rotate(var(--tilt));}

/* ===================== ТИПОГРАФИКА ===================== */

h1,h2,h3{margin:0;font-family:var(--hand);font-weight:700;line-height:1.1;}
h1{font-size:31px;}
h2{font-size:24px;}
h3{font-size:19.5px;}

.hand{font-family:var(--hand);}
.num,.type{font-family:var(--type);font-variant-numeric:tabular-nums;}
.muted{opacity:.72;}

/* каракуля-подпись со стрелкой */
.scribble{
  font-family:var(--hand);
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.15;
}

.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:26px 4px 12px;
}
.section-head h1,.section-head h2{
  position:relative;
  color:var(--chalk);
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.section-head h1::after,
.section-head h2::after{
  content:"";position:absolute;
  left:-3px;right:-5px;bottom:2px;height:9px;
  background:var(--marker);opacity:.5;
  transform:rotate(-.8deg);border-radius:2px;
  z-index:-1;
}
.section-head .link{
  font-family:var(--hand);
  font-size:17px;
  color:var(--gold);
  cursor:pointer;
  text-decoration:underline wavy rgba(232,176,58,.5);
  text-underline-offset:3px;
}

/* ===================== ШАПКА ===================== */

.topbar{
  display:flex;align-items:center;gap:9px;
  margin:4px 2px 18px;
}

.avatar{
  width:52px;height:52px;flex:none;
  border-radius:50%;
  object-fit:cover;
  background:var(--marker);
  border:3px solid var(--paper);
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  --tilt:-3deg;transform:rotate(var(--tilt));
}
.avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hand);font-size:25.5px;color:#fff;
}

.topbar .who{flex:1;min-width:0;}
/*
 * Приветствие обрезается, а не переносится: справа теперь стоят и стрик,
 * и кнопка звука, и на узком экране длинное «здарова, братишка!» ломало
 * шапку на две строки, сдвигая всё вниз.
 */
.topbar .hello{
  font-family:var(--hand);
  font-size:22px;
  color:#B79BFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .name{
  font-family:var(--hand);
  font-size:17px;
  color:var(--chalk-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;
  font-family:var(--hand);font-size:17px;
  background:var(--note);color:var(--ink);
  border:2px solid rgba(0,0,0,.35);
  --tilt:3deg;transform:rotate(var(--tilt));
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}

/* ===================== БАЛАНС ===================== */

/* без overflow:hidden — иначе скотч по краям обрезается */
.hero{
  position:relative;
  padding:22px 18px 18px;
  margin-top:14px;
}

.hero .label{
  font-family:var(--hand);
  font-size:24px;
  color:var(--marker-2);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.hero .value{
  display:flex;align-items:center;gap:10px;
  margin-top:2px;
  font-family:var(--type);
  font-size:53px;font-weight:700;
  line-height:1;
  color:#FFF8E7;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.hero .value small{font-size:34.5px;}

.hero-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:16px;
}

.hero-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;
  font-family:var(--type);font-size:15.5px;font-weight:700;
  background:#141210;color:#F0E6D2;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  --tilt:-1deg;transform:rotate(var(--tilt));
}

/* «ИСТОРИЯ →» — мазок маркером */
.hero-link{
  font-family:var(--hand);font-size:19.5px;
  padding:8px 16px;
  background:var(--marker);color:#fff;
  --tilt:1.2deg;transform:rotate(var(--tilt));
  box-shadow:0 3px 9px rgba(0,0,0,.5);
  border-radius:3px 8px 4px 7px;
}

/* подпись от руки — в потоке, иначе при длинной фразе
   она наезжает на кнопку «история» */
.hero .scribble{
  display:inline-block;
  margin-top:10px;
  max-width:60%;
  font-size:16.5px;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  transform:rotate(-2.5deg);
  transform-origin:left center;
}

/* ===================== СТРИК ===================== */

.streak-card{padding:14px 16px;margin-top:14px;}

.streak{display:flex;align-items:center;gap:13px;}

.flame{
  width:56px;height:56px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:39px;
  --tilt:-5deg;transform:rotate(var(--tilt));
}
.flame.cold{filter:grayscale(1);opacity:.6;}

.streak .info{flex:1;min-width:0;}
.streak .title{
  font-family:var(--hand);font-size:22px;
  text-transform:uppercase;letter-spacing:.01em;
}
.streak .sub{font-family:var(--type);font-size:14px;margin-top:3px;opacity:.75;}

.mult{
  font-family:var(--hand);
  font-size:30px;
  color:var(--marker-2);
  --tilt:4deg;transform:rotate(var(--tilt));
}

/* ===================== ПРОГРЕСС ===================== */

.bar{
  height:12px;
  margin-top:10px;
  background:rgba(0,0,0,.14);
  border:2px solid rgba(0,0,0,.55);
  overflow:hidden;
}
.bar > i{
  display:block;height:100%;width:0;
  background:var(--marker);
  transition:width .7s cubic-bezier(.2,.8,.25,1);
}
.bar.star > i{background:var(--gold);}
.bar.fire > i{background:var(--red);}
.bar.ok > i{background:var(--green);}

/* на доске рамка светлее */
.board .bar{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);}

/* ===================== ДОСКА С ПРИЗЫВОМ ===================== */

.cta{padding:18px 16px;margin-top:14px;}

.cta .cta-top{display:flex;gap:12px;align-items:flex-start;}
.cta .emoji{font-size:34.5px;flex:none;--tilt:-6deg;transform:rotate(var(--tilt));}
.cta h3{
  color:#C0A6FF;
  font-size:22px;
  text-transform:uppercase;
}
.cta .cta-text{
  font-family:var(--type);
  font-size:14.5px;line-height:1.5;
  color:var(--chalk-soft);
  margin-top:5px;
}

.reward-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

/* Высота только от содержимого: у рукописных шрифтов глифы выше
   строки, и при фиксированной высоте нижняя строка вылезала за рамку. */
.stat{
  flex:1;min-width:96px;
  padding:11px 12px 13px;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.22);
}
.stat .k{
  font-family:var(--hand);
  font-size:15px;line-height:1.4;
  color:var(--chalk-soft);
  text-transform:uppercase;
}
.stat .v{
  font-family:var(--type);
  font-size:22px;font-weight:700;line-height:1.35;
  margin-top:4px;
  color:var(--chalk);
  overflow-wrap:anywhere;
}

/* на бумаге те же плитки читаются тёмным */
.paper .stat,.cardboard .stat{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.3);
}
.paper .stat .k,.cardboard .stat .k{color:var(--ink-soft);}
.paper .stat .v,.cardboard .stat .v{color:var(--ink);}

/* ===================== КНОПКИ ===================== */

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:14px;
  margin-top:14px;
  border:none;
  font-family:var(--hand);
  font-size:22px;
  color:#fff;
  background:var(--marker);
  border-radius:4px 10px 5px 9px;
  box-shadow:0 4px 0 rgba(0,0,0,.45);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45);}

.btn.ghost{
  background:transparent;
  color:var(--chalk);
  border:2px dashed rgba(255,255,255,.35);
  box-shadow:none;
}
.btn.star{background:var(--gold);color:#2A1A00;}
.btn:disabled{opacity:.5;box-shadow:none;cursor:default;}
.btn.sm{width:auto;padding:8px 15px;font-size:18.5px;margin-top:0;}

/* ===================== ЗАДАНИЯ ===================== */

.quest{
  display:flex;gap:12px;align-items:flex-start;
  transform:rotate(var(--tilt,0deg));
  padding:14px;
  margin-bottom:12px;
}
.quest:nth-child(odd){--tilt:-.5deg;}
.quest:nth-child(even){--tilt:.45deg;}

.quest.ready{box-shadow:0 6px 18px rgba(47,158,68,.35),0 6px 18px rgba(0,0,0,.5);}
.quest.done{opacity:.55;filter:grayscale(.4);}

.quest .icon{font-size:30px;flex:none;transform:rotate(-5deg);}

/*
 * Рисованные значки вместо эмодзи.
 *
 * Размер задаём в em, а не в пикселях: значок стоит там же, где стоял
 * эмодзи, и должен слушаться того же font-size, что уже настроен у каждой
 * карточки. Иначе пришлось бы дублировать размеры во всех местах.
 */
.ic-art{
  width:1.15em;height:1.15em;
  object-fit:contain;
  vertical-align:-.18em;
}
/* звезда рядом с числом: чуть меньше строки, чтобы не распирать её */
.star-ic{
  width:1.05em;height:1.05em;
  object-fit:contain;
  vertical-align:-.16em;
}
.quest .body{flex:1;min-width:0;}
.quest .t{
  font-family:var(--hand);font-size:20.5px;line-height:1.15;
  text-transform:uppercase;
}
.quest .d{font-family:var(--type);font-size:14px;margin-top:3px;opacity:.8;}
.quest .meta{
  display:flex;align-items:center;gap:8px;
  font-family:var(--type);
  font-size:12.5px;margin-top:8px;opacity:.75;
}
.quest .meta > span{white-space:nowrap;}
.quest .meta > span:last-child{margin-left:auto;}

.tag{
  font-family:var(--hand);
  font-size:14px;
  padding:1px 7px;
  border:1.5px solid currentColor;
  border-radius:3px 8px 4px 7px;
  text-transform:uppercase;
  color:var(--marker-2);
}
.tag.week{color:#A35B00;}

.reward-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--hand);
  font-size:22px;
  color:#8A6A00;
  flex:none;
  --tilt:-4deg;transform:rotate(var(--tilt));
}

/* ===================== ЛИДЕРБОРД ===================== */

.segmented{
  display:flex;gap:6px;
  margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;
  padding:2px;
}
.segmented::-webkit-scrollbar{display:none;}
.segmented button{
  flex:none;
  padding:7px 14px;
  border:2px solid rgba(255,255,255,.25);
  background:transparent;
  color:var(--chalk-soft);
  font-family:var(--hand);
  font-size:18.5px;
  cursor:pointer;
  border-radius:4px 9px 5px 8px;
  transition:.15s ease;
}
.segmented button.on{
  background:var(--marker);
  border-color:var(--marker);
  color:#fff;
  --tilt:-1deg;transform:rotate(var(--tilt));
}

.podium{display:flex;align-items:flex-end;gap:8px;margin-bottom:16px;}
.podium .p{
  flex:1;text-align:center;
  transform:rotate(var(--tilt,0deg));
  padding:12px 6px;
}
.podium .p:nth-child(1){--tilt:-2deg;}
.podium .p:nth-child(2){--tilt:1deg;}
.podium .p:nth-child(3){--tilt:2.5deg;}
.podium .p.first{padding:18px 6px;}
.podium .p .medal{font-size:30px;}
.podium .p .n{
  font-family:var(--hand);font-size:16px;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.podium .p .s{font-family:var(--type);font-size:12.5px;margin-top:2px;opacity:.75;}

.row{
  display:flex;align-items:center;gap:12px;
  transform:rotate(var(--tilt,0deg));
  padding:11px 14px;
  margin-bottom:8px;
}
.row:nth-child(odd){--tilt:-.35deg;}
.row.me{box-shadow:0 6px 18px rgba(124,77,255,.4),0 6px 16px rgba(0,0,0,.5);}
.row .place{
  width:30px;text-align:center;flex:none;
  font-family:var(--hand);font-size:22px;
}
.row .nm{
  flex:1;min-width:0;font-family:var(--hand);font-size:19.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .sc{font-family:var(--type);font-size:16px;font-weight:700;flex:none;}

.rank-card{
  position:sticky;
  bottom:calc(var(--nav-h) + var(--safe-b) + 10px);
  margin-top:16px;padding:14px 16px;
}

/* ===================== АЧИВКИ ===================== */

.ach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(102px,1fr));
  gap:10px;
}
.ach{text-align:center;padding:13px 8px;transform:rotate(var(--tilt,0deg));cursor:pointer;}
.ach:nth-child(3n){--tilt:-1.4deg;}
.ach:nth-child(3n+1){--tilt:1.1deg;}
.ach .i{font-size:30px;filter:grayscale(1);opacity:.35;}
.ach.on .i{filter:none;opacity:1;}
/* закрытая ачивка гасится через filter, картинке нужен тот же серый */
.ach .i .ic-art{display:inline-block;}
.ach .t{font-family:var(--hand);font-size:16px;margin-top:5px;line-height:1.15;}
.ach .p{font-family:var(--type);font-size:12px;margin-top:3px;opacity:.7;}

/* ===================== БОНУСЫ ОТ АЧИВОК ===================== */

.perk-list{margin-top:8px;}
.perk-list .perk{
  display:flex;align-items:center;gap:9px;
  font-family:var(--type);
  font-size:13.5px;line-height:1.5;
  color:var(--chalk-soft);
  padding:3px 0;
}
.perk-list .perk b{color:#B79BFF;font-weight:700;}
.perk-list .perk .mark{font-size:17px;flex:none;}
.perk-list .empty-perks{
  font-family:var(--hand);font-size:16px;color:var(--chalk-soft);
}

/* ===================== ШТОРКА С ДЕТАЛЯМИ ===================== */

.sheet{
  position:fixed;inset:0;z-index:90;
  display:none;
}
.sheet.open{display:block;}

.sheet-back{
  position:absolute;inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(3px);
  animation:fade-in .25s ease;
}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

.sheet-body{
  position:absolute;
  left:0;right:0;bottom:0;
  max-width:560px;margin:0 auto;
  padding:16px 20px calc(24px + var(--safe-b));
  text-align:center;
  animation:sheet-up .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheet-up{
  from{transform:translateY(100%);}
  to{transform:none;}
}

.sheet-grip{
  width:52px;height:5px;border-radius:3px;
  background:rgba(0,0,0,.28);
  margin:0 auto 12px;
}

.sheet-icon{
  font-size:52px;line-height:1;
  margin-bottom:6px;
  animation:wobble 3s ease-in-out infinite;
  display:inline-block;
}

.sheet-desc{
  font-family:var(--type);
  font-size:14px;line-height:1.5;
  margin-top:6px;
  color:var(--ink-soft);
}

.sheet-progress{
  font-family:var(--type);
  font-size:13.5px;
  margin-top:7px;
  color:var(--ink-soft);
}

.sheet-rows{margin-top:14px;text-align:left;}
.sheet-rows .sr{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;
  border-bottom:1px dashed rgba(0,0,0,.22);
}
.sheet-rows .sr:last-child{border-bottom:none;}
/* классы .tx/.tt/.dd уже заняты строками истории — там свой display:flex,
   из-за него заголовок и описание вставали в один ряд */
.sheet-rows .sr .ic{font-size:19px;flex:none;line-height:1.4;}
.sheet-rows .sr .txt{flex:1;min-width:0;}
.sheet-rows .sr .head{
  font-family:var(--hand);font-size:17px;line-height:1.35;
  text-transform:uppercase;
}
.sheet-rows .sr .sub{
  font-family:var(--type);font-size:13px;
  color:var(--ink-soft);line-height:1.5;
  margin-top:3px;
  overflow-wrap:anywhere;
}

/* ===================== ПЛИТКИ ===================== */

.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.tile{
  padding:15px;
  transform:rotate(var(--tilt,0deg));
  display:flex;align-items:center;gap:11px;
  font-family:var(--hand);font-size:19.5px;
}
.tile:nth-child(odd){--tilt:-1deg;}
.tile:nth-child(even){--tilt:.8deg;}
.tile .ti{
  font-size:27.5px;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
}
.tile .ti img{width:44px;height:44px;object-fit:contain;display:block;}

/* ===================== СПИСКИ ===================== */

.tx{
  display:flex;align-items:center;gap:12px;
  padding:11px 2px;
  border-bottom:1px dashed rgba(0,0,0,.25);
}
.tx:last-child{border-bottom:none;}
.tx .ic{font-size:24px;flex:none;}
.tx .tt{flex:1;min-width:0;}
.tx .tt b{
  font-family:var(--hand);font-size:18.5px;font-weight:400;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tx .tt span{font-family:var(--type);font-size:12px;opacity:.65;}
.tx .am{font-family:var(--type);font-size:17px;font-weight:700;flex:none;}
.plus{color:var(--green);}
.minus{color:var(--red);}

.empty{text-align:center;padding:36px 20px;}
.empty .e{font-size:46px;margin-bottom:8px;}
.empty p{margin:0;font-family:var(--hand);font-size:19.5px;}

/* ===================== ФОРМЫ ===================== */

.input{
  width:100%;
  padding:13px 15px;
  border:2px solid rgba(0,0,0,.5);
  background:rgba(255,255,255,.6);
  color:var(--ink);
  font-family:var(--type);
  font-size:17px;font-weight:700;
  letter-spacing:.05em;
  outline:none;
}
.input:focus{border-color:var(--marker);}
.input::placeholder{color:rgba(36,29,22,.42);font-weight:400;}

.copy-box{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;margin-top:12px;
  background:rgba(0,0,0,.08);
  border:2px dashed rgba(0,0,0,.35);
}
.copy-box code{
  flex:1;min-width:0;
  font-family:var(--type);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===================== МЕМ-СТИКЕРЫ ===================== */

.meme{
  display:inline-block;
  line-height:1;
  pointer-events:none;
}
.meme img{display:block;width:100%;height:auto;}

/* плачущий кот в правом верхнем углу картонки */
.meme-cat img{clip-path:inset(0 0 5% 0);}

.meme-cat{
  position:absolute;
  right:4px;top:16px;
  width:78px;z-index:1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
/* строка с TON и кнопкой всегда поверх кота */
.hero-row{position:relative;z-index:2;}

/* тролль подглядывает из угла доски, за текстом */
.meme-troll{
  position:absolute;
  right:-12px;bottom:-10px;
  width:96px;z-index:0;
  opacity:.22;
}
/* тролль выглядывает из-за края, лишнее прячем */
.cta{overflow:hidden;}
.cta .cta-top,.cta .reward-row,.cta .btn,.cta .hint{position:relative;z-index:1;}

/* пепе вместо огонька в полоске серии */
.flame .meme.has-img{width:54px;}

/* ===================== МЕМ-БЛОКИ ===================== */

.meme-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:18px;
  align-items:start;
}

.rules{padding:14px 14px 16px;}
.rules h3{font-size:18.5px;text-transform:uppercase;margin-bottom:8px;}
.rules ol{
  margin:0;padding-left:20px;
  font-family:var(--hand);font-size:18.5px;line-height:1.6;
}
.rules li{text-decoration:line-through;text-decoration-thickness:2px;}
.rules li:last-child{color:var(--red);}
.rules .face{font-size:25.5px;margin-top:6px;display:block;}

.ticker{padding:13px 14px;}
.ticker h3{
  font-size:18.5px;text-transform:uppercase;
  color:#C0A6FF;margin-bottom:8px;
}
.ticker .t-row{
  display:flex;justify-content:space-between;
  font-family:var(--type);font-size:15.5px;
  padding:2px 0;
}
.ticker .t-row b{font-weight:400;color:var(--chalk-soft);}
.ticker .up{color:#5BD97A;}
.ticker .down{color:#FF6B6B;}
.ticker .t-note{
  font-family:var(--hand);font-size:14.5px;
  margin-top:8px;color:var(--chalk-soft);
}

.trash{
  text-align:center;
  margin:20px 0 4px;
}
.trash-scene{
  display:flex;align-items:flex-end;justify-content:center;
  gap:6px;
}
.trash .fire{font-size:44px;line-height:1;align-self:center;}
.meme-trash{
  width:150px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.7))
         drop-shadow(0 0 26px rgba(255,120,40,.28));
}
.meme-trash{text-align:center;}
.trash-note{
  font-family:var(--hand);
  color:var(--chalk-soft);
  font-size:17px;
  margin-top:6px;
}

/* ===================== ЭКРАНЫ / НАВИГАЦИЯ ===================== */

.screen{display:none;animation:enter .24s ease;}
.screen.active{display:block;}

@keyframes enter{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}

.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;
  padding:8px 6px calc(8px + var(--safe-b));
  background:linear-gradient(180deg,#141210,#0A0908);
  border-top:2px solid rgba(255,255,255,.12);
  box-shadow:0 -6px 20px rgba(0,0,0,.7);
}
/* шесть пунктов вместо пяти — подписи ужимаем, иначе не влезают */
.nav button{
  flex:1;min-width:0;border:none;background:transparent;
  color:var(--chalk-soft);
  font-family:var(--hand);
  font-size:13.5px;
  padding:5px 1px;cursor:pointer;
  white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  position:relative;
  transition:color .18s ease;
}
.nav button .ni{
  font-size:26.5px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  height:38px;
  transition:transform .2s ease, filter .2s ease;
}
.nav button .ni img{
  height:38px;width:auto;
  display:block;
  filter:grayscale(.55) brightness(.8);
  transition:filter .2s ease, transform .2s ease;
}
.nav button.on .ni img{filter:none;}
.nav button.on{color:#C0A6FF;}
.nav button.on .ni{transform:translateY(-3px) rotate(-6deg) scale(1.12);}
.nav .dot{
  position:absolute;top:0;right:calc(50% - 17px);
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  border:2px solid #0A0908;
}

/* ===================== ТОСТ / КОНФЕТТИ ===================== */

.toast{
  position:fixed;left:50%;
  bottom:calc(var(--nav-h) + var(--safe-b) + 20px);
  transform:translate(-50%,20px) rotate(-1.5deg);
  z-index:60;
  padding:11px 18px;
  background:var(--note);color:var(--ink);
  border:2px solid rgba(0,0,0,.45);
  font-family:var(--hand);font-size:19.5px;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:.25s ease;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0) rotate(-1.5deg);}

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

/* ===================== СКЕЛЕТОНЫ ===================== */

.sk{
  background:repeating-linear-gradient(
    -45deg,rgba(255,255,255,.05) 0 10px,rgba(255,255,255,.10) 10px 20px);
  border:2px dashed rgba(255,255,255,.14);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.5;}
  50%{opacity:.9;}
}
.sk.hero{height:150px;}
.sk.line{height:74px;margin-bottom:11px;}

/* ===================== ПРОЧЕЕ ===================== */

.pop{animation:pop .4s cubic-bezier(.2,1.5,.4,1);}
@keyframes pop{
  0%{transform:scale(1);}
  45%{transform:scale(1.16) rotate(-2deg);}
  100%{transform:scale(1);}
}

.market-card{padding:14px;margin-bottom:11px;transform:rotate(var(--tilt,0deg));}
.market-card:nth-child(odd){--tilt:-.5deg;}
.market-card .mt{font-family:var(--hand);font-size:19.5px;}
.market-card .mp{
  display:flex;align-items:center;justify-content:space-between;
  margin:8px 0 10px;
}
.market-card .usd{font-family:var(--type);font-size:14px;opacity:.7;}
.market-card .st{font-family:var(--hand);font-size:22px;color:#8A6A00;}

.pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:16px 0 6px;
  font-family:var(--hand);font-size:19.5px;color:var(--chalk-soft);
}
.pager button{
  width:40px;height:40px;
  border:2px solid rgba(255,255,255,.3);
  background:transparent;color:var(--chalk);
  font-size:19.5px;cursor:pointer;
  border-radius:4px 9px 5px 8px;
}
.pager button:disabled{opacity:.3;}

.hint{
  font-family:var(--type);
  font-size:13px;line-height:1.6;
  margin-top:12px;opacity:.72;
}
.hint b{font-weight:700;opacity:1;}

/* ===================== ЗАГРУЗОЧНЫЙ ЭКРАН ===================== */

#splash{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--wall);
  overflow:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
#splash.hidden{opacity:0;visibility:hidden;}

#splash::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 40% at 50% 34%,rgba(124,77,255,.34) 0%,transparent 68%),
    radial-gradient(40% 32% at 82% 70%,rgba(217,54,54,.16) 0%,transparent 70%);
  animation:pulseGlow 3.2s ease-in-out infinite alternate;
}
#splash::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);
  opacity:.25;mix-blend-mode:overlay;
}

@keyframes pulseGlow{
  from{opacity:.75;transform:scale(1);}
  to{opacity:1;transform:scale(1.06);}
}

.splash-inner{
  position:relative;z-index:2;
  width:100%;max-width:420px;padding:0 26px;text-align:center;
}

.splash-mark{
  position:relative;height:170px;
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:14px;
  animation:bob 2.8s ease-in-out infinite;
}
.splash-mark.no-mask{height:64px;align-items:center;margin-bottom:18px;}
.splash-mark span{font-size:50.5px;line-height:1;}
.splash-mark picture{display:contents;}
.splash-mark img{
  max-height:170px;max-width:74%;object-fit:contain;
  opacity:0;transform:scale(.92);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1);
  filter:drop-shadow(0 0 30px rgba(124,77,255,.6)) drop-shadow(0 14px 34px rgba(0,0,0,.85));
}
.splash-mark img.ready{opacity:1;transform:none;}

@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-9px) rotate(3deg);}
}

.splash-title{
  font-family:var(--hand);
  font-size:clamp(40px,14vw,62px);
  line-height:.95;
  color:#FFF8E7;
  text-shadow:3px 3px 0 rgba(0,0,0,.6);
}

.splash-sub{
  font-family:var(--hand);
  font-size:clamp(26px,9vw,40px);
  line-height:1;margin-top:2px;
  transform:rotate(-2deg);
  color:#B79BFF;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
}

.splash-bar{
  position:relative;
  display:flex;align-items:center;gap:8px;
  margin:24px auto 0;
  padding:7px 11px;
  border:3px solid rgba(255,255,255,.75);
  background:rgba(0,0,0,.5);
  border-radius:4px 12px 5px 10px;
}

.splash-segs{flex:1;display:flex;gap:4px;height:20px;}
.splash-segs i{
  flex:1;
  background:rgba(255,255,255,.10);
  transition:background .18s ease;
}
.splash-segs i.on{background:var(--marker);}

.splash-bolt{font-size:19.5px;}

.splash-status{
  margin-top:15px;
  font-family:var(--type);
  font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--chalk-soft);
  min-height:16px;
}

.splash-pct{
  margin-top:5px;
  font-family:var(--hand);
  font-size:19.5px;
  color:#B79BFF;
}

.splash-tag{
  position:absolute;
  font-family:var(--hand);
  font-size:clamp(17px,5.5vw,25px);
  opacity:.9;pointer-events:none;z-index:1;
  animation:flicker 4s steps(1) infinite;
}
.splash-tag.t1{top:15%;left:7%;color:#FF6B6B;transform:rotate(-9deg);}
.splash-tag.t2{top:12%;right:8%;color:#FF6B6B;transform:rotate(7deg);animation-delay:.9s;}
.splash-tag.t3{bottom:20%;left:9%;color:#B79BFF;transform:rotate(6deg);animation-delay:1.7s;}
.splash-tag.t4{bottom:17%;right:7%;color:#5BD97A;transform:rotate(-6deg);animation-delay:2.4s;}

@keyframes flicker{
  0%,86%,100%{opacity:.9;}
  88%{opacity:.3;}
  90%{opacity:.95;}
  92%{opacity:.45;}
}

/* =========================================================
   АНИМАЦИИ
   Только transform и opacity — они не заставляют браузер
   пересчитывать раскладку и не дёргают скролл на слабых телефонах.
   ========================================================= */

@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--tilt,0deg));}
  50%{transform:translateY(-6px) rotate(calc(var(--tilt,0deg) + 2deg));}
}

@keyframes wobble{
  0%,100%{transform:rotate(var(--tilt,0deg));}
  25%{transform:rotate(calc(var(--tilt,0deg) - 3deg));}
  75%{transform:rotate(calc(var(--tilt,0deg) + 3deg));}
}

@keyframes flicker-fire{
  0%,100%{transform:scale(1) rotate(-3deg);opacity:1;}
  30%{transform:scale(1.12) rotate(4deg);opacity:.85;}
  60%{transform:scale(.95) rotate(-5deg);opacity:1;}
}

@keyframes breathe{
  0%,100%{transform:rotate(var(--tilt,0deg)) scale(1);}
  50%{transform:rotate(var(--tilt,0deg)) scale(1.06);}
}

@keyframes rise{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

@keyframes sheen{
  0%{transform:translateX(-140%) skewX(-20deg);}
  60%,100%{transform:translateX(260%) skewX(-20deg);}
}

@keyframes nudge{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

@keyframes stripes{
  from{background-position:0 0;}
  to{background-position:28px 0;}
}

/* --- появление блоков лесенкой --- */
.screen.active > *{animation:rise .38s cubic-bezier(.2,.8,.25,1) backwards;}
.screen.active > *:nth-child(1){animation-delay:.02s;}
.screen.active > *:nth-child(2){animation-delay:.07s;}
.screen.active > *:nth-child(3){animation-delay:.12s;}
.screen.active > *:nth-child(4){animation-delay:.17s;}
.screen.active > *:nth-child(5){animation-delay:.22s;}
.screen.active > *:nth-child(n+6){animation-delay:.26s;}

/* --- отклик на палец у всего кликабельного --- */
.tile,.quest,.row,.market-card,.ach,.podium .p,.hero,.chip,.hero-link{
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.tile:active,.market-card:active,.ach:active,.podium .p:active{
  transform:rotate(var(--tilt,0deg)) scale(.96);
  filter:brightness(1.08);
}
.quest:active,.row:active{transform:rotate(var(--tilt,0deg)) scale(.985);}
.hero:active{transform:rotate(var(--tilt,0deg)) scale(.985);}

/* --- кнопки: блик пробегает по поверхности --- */
.btn{position:relative;overflow:hidden;}
.btn::after{
  content:"";position:absolute;
  top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sheen 4.5s ease-in-out infinite;
  pointer-events:none;
}
.btn.ghost::after{display:none;}

/* Кнопка «забрать» зовёт нажать свечением, а не движением:
   прыгающая цель уезжает из-под пальца, по ней трудно попасть. */
@keyframes call-to-action{
  0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 0 0 rgba(232,176,58,.55);}
  50%{box-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 0 9px rgba(232,176,58,0);}
}
.quest.ready .btn{animation:call-to-action 1.6s ease-out infinite;}

@keyframes ready-glow{
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 0 0 rgba(47,158,68,.45);}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 22px 3px rgba(47,158,68,.35);}
}
.quest.ready{animation:ready-glow 2.6s ease-in-out infinite;}

/* --- мемы слегка живут --- */
.meme-cat img{clip-path:inset(0 0 5% 0);}

.meme-cat{--tilt:4deg;animation:floaty 4.2s ease-in-out infinite;}
.meme-troll{--tilt:-5deg;animation:floaty 5.6s ease-in-out infinite .6s;}
.flame .meme{--tilt:0deg;animation:wobble 3.4s ease-in-out infinite;}
.meme-trash{--tilt:0deg;animation:floaty 3.8s ease-in-out infinite;}

/* --- огонь у мусорки --- */
.trash .fire{
  display:inline-block;
  animation:flicker-fire 1.5s ease-in-out infinite;
}
.trash .fire.right{animation-delay:.45s;}

/* --- стрик-чип пульсирует, пока серия жива --- */
.chip{--tilt:3deg;animation:breathe 2.4s ease-in-out infinite;}

/* --- прогресс-бары: заливка с бегущими полосками --- */
.bar > i{
  background-image:repeating-linear-gradient(
    -45deg,rgba(255,255,255,.22) 0 6px,transparent 6px 14px);
  background-size:28px 100%;
  animation:stripes .9s linear infinite;
}

/* --- медали на подиуме --- */
.podium .p .medal{display:inline-block;animation:wobble 3.2s ease-in-out infinite;}
.podium .p.first .medal{animation-duration:2.4s;}

/* --- разблокированная ачивка светится --- */
.ach.on .i{animation:breathe 3s ease-in-out infinite;}

/* --- активная вкладка подпрыгивает при переключении --- */
.nav button.on .ni{animation:nudge .5s ease;}

/* --- цифры тикера мигают при обновлении --- */
.ticker .t-row span{transition:opacity .3s ease;}
.ticker.updating .t-row span{opacity:.25;}

/* --- уважаем системную настройку «меньше движения» --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   ОТКЛИК НА ДЕЙСТВИЯ
   ========================================================= */

/* --- наведение: только там, где мышь реально есть --- */
@media (hover: hover) and (pointer: fine){
  .btn:hover{
    transform:translateY(-2px) scale(1.015);
    box-shadow:0 7px 0 rgba(0,0,0,.45), 0 10px 22px rgba(124,77,255,.35);
    filter:brightness(1.06);
  }
  .btn.ghost:hover{
    border-color:var(--marker);
    background:rgba(124,77,255,.12);
    box-shadow:none;
  }
  .tile:hover,.market-card:hover,.ach:hover,.podium .p:hover{
    transform:rotate(var(--tilt,0deg)) translateY(-3px) scale(1.02);
    filter:brightness(1.07);
  }
  .quest:hover,.row:hover{
    transform:rotate(var(--tilt,0deg)) translateY(-2px);
    filter:brightness(1.05);
  }
  .hero:hover{transform:rotate(var(--tilt,0deg)) translateY(-3px);}
  .hero-link:hover{filter:brightness(1.12);transform:rotate(1.2deg) scale(1.04);}
  .section-head .link:hover{color:#FFD36B;transform:translateX(2px);}
  .segmented button:hover{color:var(--chalk);border-color:var(--marker);}
  .nav button:hover{color:var(--chalk);}
  .nav button:hover .ni{transform:translateY(-3px) scale(1.1);}
  .pager button:hover:not(:disabled){border-color:var(--marker);color:#C0A6FF;}
  .copy-box:hover{border-color:var(--marker);}
}

/* --- волна от пальца/курсора --- */
.btn,.tile,.row,.quest,.market-card,.ach,.segmented button,.nav button,.hero-link{
  position:relative;
}
.tile,.row,.market-card,.ach,.segmented button,.nav button,.hero-link{overflow:hidden;}

.ripple{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
  transform:scale(0);
  opacity:.8;
  pointer-events:none;
  animation:ripple .55s ease-out forwards;
  z-index:5;
}
@keyframes ripple{
  to{transform:scale(2.2);opacity:0;}
}

/* --- переход между вкладками уезжает в сторону --- */
@keyframes slide-from-right{
  from{opacity:0;transform:translateX(26px);}
  to{opacity:1;transform:none;}
}
@keyframes slide-from-left{
  from{opacity:0;transform:translateX(-26px);}
  to{opacity:1;transform:none;}
}
.screen.from-right{animation:slide-from-right .3s cubic-bezier(.2,.8,.25,1);}
.screen.from-left{animation:slide-from-left .3s cubic-bezier(.2,.8,.25,1);}

/* --- награда улетает вверх --- */
.reward-float{
  position:fixed;
  z-index:80;
  font-family:var(--hand);
  font-size:30px;
  color:var(--gold);
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  pointer-events:none;
  animation:float-up 1.1s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes float-up{
  0%{opacity:0;transform:translate(-50%,0) scale(.7);}
  20%{opacity:1;transform:translate(-50%,-14px) scale(1.15);}
  100%{opacity:0;transform:translate(-50%,-90px) scale(1);}
}

/* --- звезда баланса вспыхивает при изменении --- */
.hero .value small{display:inline-block;transition:transform .25s ease;}
.hero .value.bump small{animation:star-pop .6s cubic-bezier(.2,1.6,.4,1);}
@keyframes star-pop{
  0%,100%{transform:scale(1) rotate(0);}
  40%{transform:scale(1.4) rotate(18deg);}
}

/* --- кнопка «скопировано» --- */
.btn.done{background:var(--green);}

/* --- сегменты топа: активный въезжает --- */
.segmented button.on{animation:seg-in .3s cubic-bezier(.2,1.5,.4,1);}
@keyframes seg-in{
  from{transform:rotate(-1deg) scale(.86);}
  to{transform:rotate(-1deg) scale(1);}
}

/* --- нижняя навигация: «штамп» при выборе --- */
.nav button.on{animation:stamp .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes stamp{
  0%{transform:scale(.9);}
  55%{transform:scale(1.06);}
  100%{transform:scale(1);}
}

/* =========================================================
   ПРИВЕТСТВЕННЫЙ ПОПАП
   ========================================================= */

.hello-pop{position:fixed;inset:0;z-index:95;display:none;}
.hello-pop.open{display:block;}

.hello-back{
  position:absolute;inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px);
  animation:fade-in .3s ease;
}

.hello-body{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(88vw,420px);
  text-align:center;
  animation:hello-in .45s cubic-bezier(.2,1.3,.4,1);
}
@keyframes hello-in{
  from{opacity:0;transform:translate(-50%,-42%) scale(.86);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

.hello-body img{
  width:100%;height:auto;
  max-height:62vh;object-fit:contain;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.85));
}

.hello-body .btn{margin-top:18px;}

/* =========================================================
   АДМИНКА
   ========================================================= */

#adminStats .stat{min-width:88px;}

.admin-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;
  margin-bottom:8px;
  cursor:pointer;
}
.admin-row .nm{
  flex:1;min-width:0;
  font-family:var(--hand);font-size:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.admin-row .id{
  font-family:var(--type);font-size:11.5px;
  color:var(--ink-soft);
}
.admin-row .st{
  font-family:var(--type);font-size:15px;font-weight:700;
  flex:none;color:#8A6A00;
}

.admin-card{padding:16px;margin-top:6px;}
.admin-card h2{margin-bottom:2px;}
.admin-card .uid{
  font-family:var(--type);font-size:12.5px;color:var(--ink-soft);
  margin-bottom:12px;
}

.admin-give{
  display:flex;gap:8px;align-items:stretch;
  margin-top:14px;
}
.admin-give .input{flex:1;text-align:center;}
.admin-give .btn{
  width:auto;flex:none;margin-top:0;
  padding:0 16px;font-size:17px;
}
.admin-give .btn.take{background:var(--red);color:#fff;}

.admin-tx{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;
  border-bottom:1px dashed rgba(0,0,0,.2);
}
.admin-tx:last-child{border-bottom:none;}
.admin-tx .who{flex:1;min-width:0;}
.admin-tx .dsc{
  font-family:var(--type);font-size:13px;line-height:1.4;
  overflow-wrap:anywhere;
}
.admin-tx .when{
  font-family:var(--type);font-size:11px;color:var(--ink-soft);
}
.admin-tx .amt{
  font-family:var(--type);font-size:15px;font-weight:700;flex:none;
}

/* =========================================================
   КАЗИНО
   ========================================================= */

.field-row{display:flex;gap:10px;}
.field{flex:1;min-width:0;}
.field-k{
  font-family:var(--hand);font-size:15px;
  text-transform:uppercase;
  margin-bottom:5px;opacity:.8;
}
.field-v{
  font-family:var(--type);font-size:20px;font-weight:700;
  line-height:1.3;
}
.board .field-k{color:var(--chalk-soft);}

.quick{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;}
.quick button{
  flex:1;min-width:56px;
  padding:8px 6px;
  border:2px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.06);
  font-family:var(--type);font-size:13px;font-weight:700;
  color:var(--ink);
  border-radius:4px 9px 5px 8px;
  cursor:pointer;
}
.board .quick button{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.05);
  color:var(--chalk);
}

.chance{
  font-family:var(--type);font-size:13px;
  margin-top:11px;opacity:.8;
}

.game-result{
  font-family:var(--type);
  font-size:52px;font-weight:700;
  line-height:1;
  color:var(--chalk);
  text-shadow:0 0 26px rgba(124,77,255,.5);
  transition:color .2s ease;
}
.game-result.win{color:#5BD97A;text-shadow:0 0 30px rgba(91,217,122,.55);}
.game-result.lose{color:#FF6B6B;text-shadow:0 0 30px rgba(255,107,107,.45);}
.game-result.rolling{animation:breathe .35s ease-in-out infinite;}

/* --- мины --- */
.mines-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:12px;
}
.mines-cell{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  border-radius:8px;
  cursor:pointer;
  transition:transform .14s ease, background .18s ease, border-color .18s ease;
}
.mines-cell.safe{
  background:rgba(47,158,68,.28);
  border-color:rgba(91,217,122,.6);
  animation:pop .35s cubic-bezier(.2,1.5,.4,1);
}
.mines-cell.boom{
  background:rgba(217,54,54,.35);
  border-color:rgba(255,107,107,.75);
  animation:pop .35s cubic-bezier(.2,1.5,.4,1);
}
.mines-cell.shown{opacity:.55;}
.mines-cell.idle{opacity:.5;cursor:default;}
.mines-cell:not(.idle):active{transform:scale(.92);}

/* --- таблицы выплат (мины, кено, слоты) --- */
.paytable{margin-top:12px;}
.paytable-head{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--hand);font-size:15px;
  text-transform:uppercase;opacity:.85;
  margin-bottom:7px;
}
.board .paytable-head{color:var(--chalk-soft);}
.paytable-row{
  display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:3px;
}
.paytable-row::-webkit-scrollbar{display:none;}
.pay-cell{
  flex:0 0 auto;
  min-width:66px;
  padding:7px 8px;
  text-align:center;
  border:2px solid rgba(0,0,0,.28);
  border-radius:5px 10px 6px 9px;
  background:rgba(0,0,0,.05);
  transition:transform .16s ease, background .16s ease;
}
.pay-cell b{
  display:block;
  font-family:var(--type);font-size:15px;font-weight:700;
  color:var(--ink);
}
.pay-cell i{
  display:block;font-style:normal;
  font-family:var(--type);font-size:10.5px;
  opacity:.7;margin-top:2px;
  white-space:nowrap;
}
.pay-cell em{display:block;font-size:24px;line-height:1;margin-bottom:3px;}
.pay-cell:hover{transform:translateY(-2px);background:rgba(255,197,61,.16);}
.board .pay-cell{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
}
.board .pay-cell b{color:var(--chalk);}

/* компактный переключатель — под ним ещё одна строка настроек */
.segmented.tight{margin-top:9px;}
.segmented.tight button{padding:7px 10px;font-size:13px;}

/* --- plinko --- */
.plinko-stage{position:relative;overflow:hidden;}
#plinkoCanvas{width:100%;height:auto;display:block;}

.plinko-slots{
  display:flex;gap:2px;margin:10px auto 0;
}
.plinko-slots span{
  flex:1 1 0;min-width:0;
  padding:7px 0 8px;
  text-align:center;
  font-family:var(--type);font-weight:700;
  font-size:15px;
  line-height:1;
  /* подписи вроде «0.29» шире своей корзины: сжимаем сам шрифт,
     а не режем текст — иначе иксы снова станет не прочитать */
  font-stretch:condensed;
  letter-spacing:-.04em;
  border-radius:4px 4px 7px 7px;
  color:#1B1206;
  /* от жёлтого в центре к красному по краям — куда лететь, видно сразу */
  background:hsl(var(--hue) 92% 58%);
  box-shadow:0 3px 0 hsl(var(--hue) 80% 40%);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* чем больше корзин, тем меньше каждой достаётся ширины */
.plinko-slots[data-count="13"] span{font-size:12.5px;}
.plinko-slots[data-count="17"] span{font-size:9.5px;gap:1px;padding:6px 0 7px;}
.plinko-slots span.hit{
  filter:brightness(1.25);
  box-shadow:0 0 18px hsl(var(--hue) 95% 60% / .85), 0 3px 0 hsl(var(--hue) 80% 40%);
}

.plinko-last{
  position:absolute;right:8px;top:8px;
  display:flex;flex-direction:column;gap:4px;
  pointer-events:none;
}
.plinko-last span{
  font-family:var(--type);font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.45);
  animation:chip-in .3s cubic-bezier(.2,1.5,.4,1);
}
.plinko-last .up{color:#5BD97A;}
.plinko-last .down{color:#FF8A8A;}
@keyframes chip-in{
  from{transform:translateX(20px);opacity:0;}
  to{transform:none;opacity:1;}
}

/* --- заголовки разделов казино --- */
.cat-head{
  display:flex;align-items:baseline;gap:9px;
  margin:20px 0 10px;
  font-family:var(--hand);font-size:23px;
  text-transform:uppercase;
  color:var(--chalk);
}
.cat-head:first-of-type{margin-top:10px;}
.cat-head span{font-size:22px;}
.cat-head i{
  font-style:normal;
  font-family:var(--type);font-size:11.5px;
  text-transform:none;
  opacity:.55;
  margin-left:auto;
  text-align:right;
}
.tile.wide{grid-column:1 / -1;}

/* --- монетка --- */
.coin-stage{position:relative;overflow:hidden;perspective:900px;}
.coin{
  position:relative;
  width:132px;height:132px;
  margin:0 auto 10px;
  z-index:1;
  transform-style:preserve-3d;
}
/*
 * Стороны не полагаются на backface-visibility: без perspective у родителя
 * вебвью схлопывает 3D-слой, и какая грань окажется сверху решает порядок
 * в разметке — монета «переворачивалась не в ту сторону». Теперь видимость
 * задаётся классом на контейнере, а вращение — это только движение.
 */
.coin-face{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:82px;line-height:1;
  border-radius:50%;
  opacity:0;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
.coin-face img{width:100%;height:100%;object-fit:contain;}
.coin.show-heads .coin-face.heads,
.coin.show-tails .coin-face.tails{opacity:1;}

/* тень под монетой сжимается, когда та взлетает */
.coin-shadow{
  width:78px;height:11px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
  position:absolute;left:0;right:0;bottom:64px;
  margin:0 auto;z-index:0;
}
.coin.spin ~ .coin-shadow{animation:coin-shadow 1s ease-in-out infinite;}
@keyframes coin-shadow{
  0%,100%{transform:scale(1);opacity:.5;}
  50%{transform:scale(.5);opacity:.2;}
}

/* --- история раундов --- */
.round{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;
  border-bottom:1px dashed rgba(0,0,0,.2);
  font-family:var(--type);font-size:13px;
}
.round:last-child{border-bottom:none;}
.round .g{flex:1;text-transform:uppercase;font-size:12px;opacity:.75;}
.round .m{font-weight:700;}

/* =========================================================
   АНИМАЦИИ ИГР
   ========================================================= */

/* --- сцена limbo --- */

/*
 * Сцена — видео целиком: город, облака, космос и взрыв нарисованы в нём.
 * Своей графики здесь больше нет, поэтому нет ни звёздного поля, ни полос
 * разгона, ни спрайта ракеты — всё это дублировало бы то, что уже в кадре.
 *
 * Пропорции ролика (600x622) зашиты в padding-top: пока видео не
 * загрузилось, сцена уже занимает свою высоту, и разметка не прыгает.
 * Фон под видео — цвет неба из первого кадра, чтобы на медленной связи
 * не зияла чёрная дыра.
 */
.limbo-stage{
  position:relative;
  overflow:hidden;
  padding:0;
  background:linear-gradient(#3E6FA8, #1B3358 60%, #0E1B36);
}
.limbo-stage::before{
  content:"";display:block;padding-top:103.7%;   /* 622 / 600 */
}
.limbo-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/*
 * Множитель лежит поверх видео. Тень под текстом обязательна: кадр за ним
 * меняется от светлого неба до белой вспышки, и без неё цифры на пике
 * взрыва пропадают совсем.
 */
.limbo-top{
  position:absolute;left:0;right:0;top:0;
  z-index:2;
  padding-top:14px;
  text-align:center;
  pointer-events:none;
}
.limbo-stage .game-result{
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.6);
}
/*
 * Подпись садится на подложку, а не просто получает тень: она приходится
 * ровно на ракету, и поверх её белого корпуса тень не спасает — текст
 * пропадает в картинке.
 */
.limbo-stage .hint{
  display:inline-block;
  color:#EAE6FF;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(10,8,20,.55);
  backdrop-filter:blur(2px);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.limbo-stage .hint:empty{display:none;}

/* --- кубик --- */
.dice-stage{position:relative;overflow:hidden;}
.dice-numbers{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.dice-num{text-align:center;flex:1;min-width:0;}
.dice-num b{
  display:block;
  font-family:var(--type);font-size:30px;font-weight:700;
  color:var(--chalk);line-height:1.1;
}
.dice-num i{
  display:block;font-style:normal;
  font-family:var(--type);font-size:11px;
  opacity:.6;margin-top:3px;
}
.dice-num.win b{color:#5BD97A;text-shadow:0 0 22px rgba(91,217,122,.6);}
.dice-num.lose b{color:#FF6B6B;text-shadow:0 0 22px rgba(255,107,107,.5);}

.dice-cube{
  font-size:40px;line-height:1;
  flex:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.dice-cube.rolling{animation:dice-roll .6s cubic-bezier(.3,.1,.3,1) infinite;}
@keyframes dice-roll{
  0%{transform:rotate(0) scale(1);}
  50%{transform:rotate(200deg) scale(1.22);}
  100%{transform:rotate(360deg) scale(1);}
}

.dice-track{
  position:relative;
  height:14px;margin:16px 0 2px;
  border-radius:7px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}
.dice-fill{position:absolute;top:0;bottom:0;}
.dice-fill.lose{left:0;right:0;background:rgba(255,107,107,.35);}
.dice-fill.win{background:linear-gradient(90deg,#3FA85B,#5BD97A);}
.dice-marker{
  position:absolute;top:-4px;bottom:-4px;width:4px;
  margin-left:-2px;
  background:var(--chalk);
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,255,255,.8);
}
/* точка выпавшего числа: приезжает на своё место и вспыхивает */
.dice-pin{
  position:absolute;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--gold);
  border:2px solid #2A1A00;
  opacity:0;
  transition:left .55s cubic-bezier(.2,1.3,.4,1), opacity .2s ease;
}
.dice-pin.on{opacity:1;}
.dice-pin.hit{box-shadow:0 0 16px 4px rgba(255,197,61,.9);}

/* ползунок кладём поверх полосы, иначе ручка висит отдельным кружком
   и непонятно, что именно она двигает */
.dice-slider{
  display:block;width:100%;
  margin:-20px 0 0;
  position:relative;z-index:2;
  -webkit-appearance:none;appearance:none;
  background:transparent;
  height:26px;
}
.dice-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--gold);
  border:3px solid #2A1A00;
  cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.6);
}
.dice-slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--gold);border:3px solid #2A1A00;
  cursor:grab;
}

.dice-stats{
  display:flex;gap:8px;margin-top:12px;
}
.dice-stats span{
  flex:1;text-align:center;min-width:0;
  padding:9px 4px;
  border:2px solid rgba(255,255,255,.15);
  border-radius:5px 10px 6px 9px;
  background:rgba(255,255,255,.05);
}
.dice-stats b{
  display:block;
  font-family:var(--type);font-size:16px;font-weight:700;
  color:var(--chalk);
}
.dice-stats i{
  display:block;font-style:normal;
  font-family:var(--type);font-size:10.5px;
  opacity:.6;margin-top:2px;
}

/* --- гонка --- */
.race-stage{position:relative;overflow:hidden;}
.race-track{
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,#12121C,#1B1B2B);
  border:2px solid rgba(255,255,255,.1);
}
/* Трасса вертикальная: две полосы рядом, машины едут снизу вверх. */
.race-road{
  position:relative;
  display:flex;
  height:300px;
  padding:0;
}
.race-lane{
  position:relative;
  flex:1;min-width:0;
  height:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#22242E,#15161D);
}
.race-split{
  flex:0 0 6px;
  background:repeating-linear-gradient(180deg,
    #F0C020 0 14px, #2A2A32 14px 28px);
}

/* разметка бежит вниз, пока едут машины */
.race-dashes{
  position:absolute;left:50%;top:-40px;bottom:-40px;
  width:4px;margin-left:-2px;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.32) 0 22px, transparent 22px 48px);
}
.race-road.running .race-dashes{animation:road-run .3s linear infinite;}
@keyframes road-run{
  from{transform:translateY(0);}
  to{transform:translateY(48px);}
}

/* финишная черта поперёк обеих полос */
.race-finish{
  position:absolute;left:0;right:0;top:10px;height:14px;z-index:2;
  background:repeating-conic-gradient(#EDEDED 0 25%, #1A1A1A 0 50%) 0 0 / 14px 14px;
  opacity:.85;
  pointer-events:none;
}

.race-car{
  position:absolute;bottom:8px;left:50%;
  width:64px;margin-left:-32px;
  transition:bottom .12s linear;
}
.race-car picture,.race-car img{display:block;width:100%;height:auto;}
.race-lane.blue .race-car{filter:drop-shadow(0 0 14px rgba(90,150,255,.8));}
.race-lane.orange .race-car{filter:drop-shadow(0 0 14px rgba(255,150,60,.8));}
.race-road.running .race-car img{animation:car-shake .1s linear infinite;}
@keyframes car-shake{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(1px);}
}
.race-car.boom{animation:car-boom .5s ease forwards;}
@keyframes car-boom{
  0%{transform:scale(1) rotate(0);}
  30%{transform:scale(1.12) rotate(-9deg);}
  100%{transform:scale(.9) rotate(5deg);opacity:.45;}
}

.race-mult{
  position:absolute;left:0;right:0;top:32px;z-index:3;
  text-align:center;
  font-family:var(--type);font-size:22px;font-weight:700;
  pointer-events:none;
}
.race-lane.blue .race-mult{color:#7FB0FF;text-shadow:0 0 16px rgba(90,150,255,.9);}
.race-lane.orange .race-mult{color:#FFB06A;text-shadow:0 0 16px rgba(255,150,60,.9);}
.race-mult.done{opacity:.45;}
.race-mult.winner{animation:mult-win .5s cubic-bezier(.2,1.6,.4,1) 2;}
@keyframes mult-win{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.3);}
}

.race-status{
  margin-top:11px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}
.race-last{
  position:absolute;right:8px;top:8px;
  display:flex;gap:4px;
  pointer-events:none;
}
.race-last span{
  font-family:var(--type);font-size:11px;font-weight:700;
  padding:3px 6px;border-radius:4px;
  background:rgba(0,0,0,.5);
  animation:chip-in .3s cubic-bezier(.2,1.5,.4,1);
}
.race-last .blue{color:#7FB0FF;}
.race-last .orange{color:#FFB06A;}

.race-cars{display:flex;gap:9px;margin-top:10px;}
.race-cars button{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;
  border:2px solid rgba(0,0,0,.3);
  background:rgba(0,0,0,.05);
  font-family:var(--hand);font-size:17px;
  color:var(--ink);
  border-radius:5px 10px 6px 9px;
  cursor:pointer;
  transition:transform .15s ease, background .18s ease, border-color .18s ease;
}
.race-cars button .car-chip{width:26px;display:block;}
.race-cars button .car-chip img{width:100%;height:auto;display:block;}
.race-cars button:hover{transform:translateY(-2px);}
.race-cars button.on[data-car="blue"]{
  background:rgba(90,150,255,.3);border-color:#7FB0FF;
}
.race-cars button.on[data-car="orange"]{
  background:rgba(255,150,60,.3);border-color:#FFB06A;
}

/* --- птички --- */
.birds-stage{position:relative;overflow:hidden;}
/* доска слева, корзины столбиком справа — как у образца */
.birds-field{display:flex;align-items:stretch;gap:8px;}
#birdsCanvas{flex:1;min-width:0;height:auto;display:block;}
.birds-slots{
  display:flex;flex-direction:column;justify-content:space-between;
  flex:0 0 52px;gap:2px;
}
.birds-slots span{
  position:relative;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  font-family:var(--type);font-size:11.5px;font-weight:700;
  color:#1B1206;
  background:hsl(var(--hue) 92% 58%);
  box-shadow:2px 0 0 hsl(var(--hue) 80% 40%);
  transition:filter .18s ease, transform .18s ease;
}
.birds-slots span.hit{
  filter:brightness(1.25);
  transform:scale(1.06);
  box-shadow:0 0 14px hsl(var(--hue) 95% 60% / .8);
}
/* счётчик прилетевших птиц */
.birds-slots i{
  position:absolute;right:-4px;top:-4px;
  font-style:normal;
  font-family:var(--type);font-size:9px;font-weight:700;
  background:#1B1206;color:#FFE27A;
  border-radius:8px;padding:1px 4px;
  animation:chip-in .3s cubic-bezier(.2,1.5,.4,1);
}
.birds-status{
  margin-top:11px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}

.turbo{
  display:flex;align-items:center;gap:9px;
  margin-top:11px;cursor:pointer;
  font-family:var(--type);font-size:13px;
  color:var(--ink-soft);
}
.turbo input{width:18px;height:18px;accent-color:#7C4DFF;cursor:pointer;}

/* --- фрукты --- */
.fruit-stage{position:relative;overflow:hidden;}
.fruit-grid{
  display:grid;
  grid-template-columns:repeat(var(--reels, 5), 1fr);
  gap:4px;
  padding:8px;
  border-radius:10px;
  background:rgba(0,0,0,.35);
  border:3px solid rgba(255,197,61,.35);
}
.fruit-reel{display:flex;flex-direction:column;gap:4px;}
/* барабаны тормозят по очереди слева направо */
.fruit-reel.spin{animation:fruit-spin .55s linear infinite;}
.fruit-reel.spin{animation-delay:calc(var(--i) * .07s);}
@keyframes fruit-spin{
  0%{transform:translateY(0);opacity:1;}
  50%{transform:translateY(-7px);opacity:.55;}
  100%{transform:translateY(0);opacity:1;}
}
.fruit-cell{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:min(6.5vw, 27px);
  border-radius:6px;
  background:rgba(255,255,255,.07);
  transition:background .2s ease, transform .2s ease;
}
.fruit-cell.win{
  background:rgba(255,197,61,.35);
  animation:pop .45s cubic-bezier(.2,1.5,.4,1);
}
.fruit-cell.wild{
  background:linear-gradient(180deg, rgba(90,150,255,.45), rgba(124,77,255,.45));
  box-shadow:inset 0 0 12px rgba(160,200,255,.6);
}
.fruit-status{
  margin-top:12px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}

/* --- double --- */
.double-stage{position:relative;overflow:hidden;}
.double-window{
  position:relative;
  overflow:hidden;
  padding:8px 0;
  border-top:2px solid rgba(255,255,255,.12);
  border-bottom:2px solid rgba(255,255,255,.12);
  /* края ленты растворяются, чтобы прокрутка не обрывалась ступенькой */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.double-strip{display:flex;gap:4px;will-change:transform;}
.dc{
  flex:0 0 auto;
  width:54px;height:66px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.45);
}
.dc.red{background:linear-gradient(180deg,#B03A3A,#7A2020);}
.dc.black{background:linear-gradient(180deg,#2C3550,#161C2E);}
.dc.gold{background:linear-gradient(180deg,#FFD75E,#C88A12);color:#3A2600;}

/* стрелка-указатель ровно по центру окна */
.double-pointer{
  position:absolute;left:50%;top:8px;
  width:0;height:0;margin-left:-9px;z-index:2;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:12px solid var(--chalk);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
}

.double-status{
  margin-top:12px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
  padding:0 14px;
}
.double-last{
  display:flex;gap:4px;justify-content:center;
  margin-top:10px;flex-wrap:wrap;padding:0 14px;
}
.dl{
  width:14px;height:14px;border-radius:50%;
  animation:chip-in .3s cubic-bezier(.2,1.5,.4,1);
}
.dl.red{background:#B03A3A;}
.dl.black{background:#2C3550;border:1px solid rgba(255,255,255,.25);}
.dl.gold{background:#FFD75E;}

.double-bets{display:flex;gap:8px;margin-top:12px;}
.dbet{
  flex:1;min-width:0;
  padding:11px 6px;
  border:2px solid rgba(0,0,0,.3);
  border-radius:5px 10px 6px 9px;
  cursor:pointer;
  color:#fff;
  transition:transform .15s ease, filter .18s ease;
}
.dbet b{display:block;font-family:var(--hand);font-size:17px;}
.dbet i{
  display:block;font-style:normal;
  font-family:var(--type);font-size:12px;font-weight:700;
  opacity:.85;margin-top:2px;
}
.dbet.red{background:linear-gradient(180deg,#B03A3A,#7A2020);}
.dbet.black{background:linear-gradient(180deg,#2C3550,#161C2E);}
.dbet.gold{background:linear-gradient(180deg,#FFD75E,#C88A12);color:#3A2600;}
.dbet:hover{transform:translateY(-2px);filter:brightness(1.15);}
.dbet:active{transform:scale(.95);}
.dbet:disabled{opacity:.45;cursor:default;transform:none;}

/* --- шарики --- */
.balloon-stage{position:relative;overflow:hidden;}
.balloon-sky{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.balloon{
  position:relative;
  aspect-ratio:.74;
  border:none;padding:0;background:none;
  cursor:pointer;
  transition:transform .15s ease;
}
/* качается только начинка, кнопка неподвижна */
.bl-inner{
  position:absolute;inset:0;
  display:block;
  animation:balloon-float 3.6s ease-in-out infinite;
  animation-delay:var(--d);
}
.art-balloon{
  position:absolute;inset:0;
  width:100%;height:100%;
  transform-origin:50% 82%;      /* тянется от узелка, как настоящий */
  transition:transform .5s cubic-bezier(.3,1.1,.5,1);
}
.bl-text{
  position:absolute;left:0;right:0;top:24%;
  text-align:center;pointer-events:none;
}
.balloon:hover{transform:scale(1.06);}
.balloon:active{transform:scale(.93);}

.bx{
  display:block;
  font-family:var(--type);font-size:15px;font-weight:700;
  color:#1A1008;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.bc{
  display:block;
  font-family:var(--type);font-size:9.5px;
  color:rgba(20,12,6,.72);
  margin-top:1px;
}
@keyframes balloon-float{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-9px) rotate(2deg);}
}

/* надувается: шар растёт, оболочка натягивается и светлеет */
.balloon.inflate .art-balloon{transform:scale(1.32);}
.balloon.inflate .bl-shine{opacity:.9;}
.balloon.inflate .bl-inner{animation:balloon-strain .5s ease-in-out infinite;}
@keyframes balloon-strain{
  0%,100%{transform:rotate(-1.5deg);}
  50%{transform:rotate(1.5deg);}
}

/* хлопок: шар исчезает, вместо него разлетаются осколки */
.art-pop{
  position:absolute;inset:0;
  width:100%;height:100%;
  color:var(--c);
  opacity:0;pointer-events:none;
}
.pop-shard{transform-origin:30px 30px;}
.balloon.pop .art-balloon{animation:balloon-burst .22s ease forwards;}
.balloon.pop .art-pop{opacity:1;}
.balloon.pop .pop-shard{animation:shard-fly .5s ease-out forwards;}
@keyframes balloon-burst{
  0%{transform:scale(1.32);}
  55%{transform:scale(1.5);filter:brightness(1.7);}
  100%{transform:scale(0);opacity:0;}
}
@keyframes shard-fly{
  0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1;}
  100%{transform:rotate(var(--a)) translateY(calc(-42px * var(--k))) scale(.4);opacity:0;}
}

/* не угадал — шарик сдувается и улетает вверх */
.balloon.fly .art-balloon{animation:balloon-away .7s ease-in forwards;}
@keyframes balloon-away{
  0%{transform:scale(1.32);}
  100%{transform:translateY(-190px) scale(.35);opacity:0;}
}
.balloon.fly .bl-text{opacity:0;transition:opacity .3s ease;}

.balloon-status{
  margin-top:14px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}

/* --- курочка --- */
.chicken-stage{position:relative;overflow:hidden;}
.chicken-road{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:3px;
  height:168px;
  border-radius:8px;
  overflow:hidden;
  /* обочины сверху и снизу, между ними асфальт */
  background:
    linear-gradient(180deg,
      #3E7A3A 0 13%, #2C2E36 13% 87%, #3E7A3A 87% 100%);
}
/* бордюры на границе травы и дороги */
.chicken-road::before,
.chicken-road::after{
  content:"";
  position:absolute;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,
    #E8E8EC 0 14px, #B23B3B 14px 28px);
  z-index:1;pointer-events:none;
}
.chicken-road::before{top:13%;}
.chicken-road::after{bottom:13%;}
.lane{
  position:relative;
  background:transparent;
  border-left:2px dashed rgba(255,255,255,.3);
  /* подписи прижаты к нижнему краю асфальта: по центру их закрывала курица */
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:26px;
  transition:background .25s ease;
}
/* пройденная полоса подсвечивается только по асфальту, не по траве */
.lane.done{
  background:linear-gradient(180deg,
    transparent 0 13%, rgba(91,217,122,.25) 13% 87%, transparent 87%);
}
.lane.finish{
  background:repeating-conic-gradient(#EDEDED 0 25%, #1A1A1A 0 50%) 0 0 / 14px 14px;
  font-size:20px;align-items:center;padding-bottom:0;
}
/* полоса узкая — подпись пишем поперёк, снизу вверх. rotate(180deg)
   вместе с vertical-rl уводил текст за край, поэтому только writing-mode */
.lane-mult{
  font-family:var(--type);font-size:9.5px;font-weight:700;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  writing-mode:vertical-rl;
  text-orientation:sideways;
  padding-bottom:2px;
  white-space:nowrap;
}
/* курочка едет по дорожкам: --lane это номер, --lanes всего полос */
.chick{
  position:absolute;top:50%;margin-top:-30px;z-index:2;
  left:calc(var(--lane) * (100% / var(--lanes)));
  width:calc(100% / var(--lanes));
  display:flex;justify-content:center;
  transition:left .3s cubic-bezier(.2,1.3,.4,1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
}
.chicken-road.running .chick{animation:chick-hop 1.4s ease-in-out infinite;}
.art-chicken{width:60px;height:auto;display:block;}

/* курица не стоит столбом: лапы перебирают, крыло и голова живут */
.chicken-road.running .ch-leg-a{animation:leg-a .38s linear infinite;}
.chicken-road.running .ch-leg-b{animation:leg-b .38s linear infinite;}
.ch-leg{transform-origin:31px 44px;}
@keyframes leg-a{
  0%,100%{transform:rotate(16deg);}
  50%{transform:rotate(-16deg);}
}
@keyframes leg-b{
  0%,100%{transform:rotate(-16deg);}
  50%{transform:rotate(16deg);}
}
.ch-wing{transform-origin:26px 31px;}
.chicken-road.running .ch-wing{animation:wing-flap .5s ease-in-out infinite;}
@keyframes wing-flap{
  0%,100%{transform:rotate(0) translateY(0);}
  50%{transform:rotate(-13deg) translateY(-2px);}
}
.ch-head{transform-origin:47px 24px;}
.chicken-road.running .ch-head{animation:head-bob .38s ease-in-out infinite;}
@keyframes head-bob{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-1.5px,1.5px);}
}
.ch-tail{transform-origin:17px 26px;}
.chicken-road.running .ch-tail{animation:tail-wag .6s ease-in-out infinite;}
@keyframes tail-wag{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(5deg);}
}
@keyframes chick-hop{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

.chick.splat{animation:chick-splat .55s ease forwards;}
.chick.splat .ch-leg-a,.chick.splat .ch-leg-b,
.chick.splat .ch-wing,.chick.splat .ch-head{animation:none;}
@keyframes chick-splat{
  0%{transform:scale(1) rotate(0);}
  35%{transform:scale(1.25) translateY(-14px) rotate(-25deg);}
  100%{transform:scale(.85) translateY(6px) rotate(96deg);opacity:.3;}
}
.chicken-status{
  margin-top:11px;text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}

/* --- больше-меньше --- */
.hilo-stage{position:relative;text-align:center;}
.hilo-card{
  display:inline-flex;align-items:center;justify-content:center;
  width:118px;height:164px;
  border-radius:12px;
  background:linear-gradient(180deg,#FFFFFF,#E4E4EC);
  color:#15151C;
  font-family:var(--type);font-size:44px;font-weight:700;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.hilo-card.red{color:#D6304A;}
.hilo-card.flip{animation:card-flip .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes card-flip{
  0%{transform:rotateY(90deg) scale(.85);opacity:.3;}
  100%{transform:rotateY(0) scale(1);opacity:1;}
}
.hilo-status{
  margin-top:14px;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
}

.hilo-bets{display:flex;gap:8px;margin:12px 0;}
.hbet{
  flex:1;min-width:0;
  padding:12px 8px;
  border:2px solid rgba(0,0,0,.3);
  border-radius:5px 10px 6px 9px;
  cursor:pointer;color:#fff;
  transition:transform .15s ease, filter .18s ease;
}
.hbet.high{background:linear-gradient(180deg,#3D7BE0,#28509B);}
.hbet.low{background:linear-gradient(180deg,#3FA85B,#26703B);}
.hbet b{display:block;font-family:var(--hand);font-size:16px;}
.hbet i{
  display:block;font-style:normal;
  font-family:var(--type);font-size:11.5px;font-weight:700;
  opacity:.9;margin-top:3px;
}
.hbet:hover{transform:translateY(-2px);filter:brightness(1.12);}
.hbet:active{transform:scale(.95);}
.hbet:disabled{
  background:rgba(0,0,0,.15);color:var(--ink-soft);
  cursor:default;transform:none;
}

/* --- пенальти --- */
/* под воротами газон, на нём мяч, под ним строка статуса — иначе
   мяч приземлялся ровно поверх текста */
.penalty-stage{position:relative;overflow:hidden;padding-bottom:96px!important;}
/* газон отдельным элементом: ::after у .board занят зерном бумаги,
   и своим правилом мы бы его затёрли на всех досках сразу */
.pitch{
  position:absolute;left:0;right:0;bottom:32px;height:64px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 26px, transparent 26px 52px),
    linear-gradient(180deg,#2F6B36,#1B4021);
}
.goal{
  position:relative;z-index:1;
  height:132px;
  border:5px solid #F2F2F5;
  border-bottom:none;
  border-radius:6px 6px 0 0;
  background:rgba(255,255,255,.04);
}
.goal-net{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 13px);
}
.goal-zones{position:absolute;inset:0;display:flex;}
.zone{
  flex:1;
  border:none;background:transparent;
  cursor:pointer;
  transition:background .18s ease;
}
.zone:not(:disabled):hover{background:rgba(255,197,61,.28);}
.zone:disabled{cursor:default;}

/* вратарь и мяч ездят по тем же пяти углам, что и кнопки */
.keeper{
  position:absolute;z-index:2;
  left:calc(var(--zone, 2) * 20% + 10%);
  top:38%;
  margin-left:-22px;
  font-size:38px;line-height:1;
  transition:left .3s ease, top .3s ease;
  /* вратарь стоит поверх центрального угла: без этого он перехватывал
     нажатие и по центру ворот было невозможно пробить */
  pointer-events:none;
}
.keeper.dive{animation:keeper-dive .5s ease;}
@keyframes keeper-dive{
  0%{transform:scale(1);}
  50%{transform:scale(1.25) rotate(-12deg);}
  100%{transform:scale(1);}
}
.ball{
  position:absolute;bottom:48px;left:50%;
  margin-left:-16px;
  font-size:32px;line-height:1;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.ball.shoot{animation:ball-shoot .6s cubic-bezier(.3,.1,.4,1) forwards;}
@keyframes ball-shoot{
  0%{transform:translate(0,0) scale(1);}
  100%{
    transform:translate(calc((var(--zone, 2) - 2) * 62px), -120px) scale(.55);
  }
}
.ball.saved{filter:grayscale(1) brightness(.6);}
.penalty-status{
  position:absolute;left:0;right:0;bottom:8px;z-index:4;
  text-align:center;min-height:22px;
  font-family:var(--type);font-size:14px;
  color:var(--chalk-soft);
  padding:0 12px;
}

/* --- слот plinko при попадании --- */
.plinko-slots span.pop{animation:slot-hit .55s cubic-bezier(.2,1.6,.4,1);}
@keyframes slot-hit{
  0%{transform:scale(1);}
  40%{transform:scale(1.45) translateY(-4px);}
  100%{transform:scale(1.14);}
}

/* --- клетка мин переворачивается --- */
.mines-cell.flip{animation:cell-flip .26s ease;}
@keyframes cell-flip{
  0%{transform:rotateY(0);}
  50%{transform:rotateY(90deg) scale(.92);}
  100%{transform:rotateY(0);}
}
.mines-cell.boom{animation:cell-boom .45s cubic-bezier(.2,1.5,.4,1);}
@keyframes cell-boom{
  0%{transform:scale(.8);}
  50%{transform:scale(1.18);}
  100%{transform:scale(1);}
}

/* --- монетка --- */
.coin.spin{animation:coin-spin 1s cubic-bezier(.25,.1,.3,1) infinite;}
@keyframes coin-spin{
  0%{transform:rotateY(0) translateY(0);}
  50%{transform:rotateY(900deg) translateY(-38px) scale(1.12);}
  100%{transform:rotateY(1800deg) translateY(0);}
}

/* пока монета в воздухе, грани мигают по очереди — отсюда ощущение,
   что она двусторонняя, при этом никакой 3D-магии не требуется */
.coin.spin .coin-face.heads{animation:face-front .3s steps(1, end) infinite;}
.coin.spin .coin-face.tails{animation:face-back .3s steps(1, end) infinite;}
@keyframes face-front{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes face-back{0%,49%{opacity:0;}50%,100%{opacity:1;}}

/* приземление: сторона уже зафиксирована классом, тут только удар о стол */
.coin.landed{animation:coin-land .55s cubic-bezier(.2,1.6,.4,1);}
@keyframes coin-land{
  0%{transform:scale(1.22);filter:brightness(1.9);}
  45%{transform:scale(.96);filter:brightness(1.15);}
  100%{transform:none;filter:none;}
}

/* --- кено --- */
.keno-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;
  font-family:var(--hand);font-size:16px;
  color:var(--chalk-soft);text-transform:uppercase;
}
.keno-tools{display:flex;gap:6px;}
.keno-tools button{
  padding:6px 11px;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:var(--chalk);
  font-family:var(--type);font-size:12px;font-weight:700;
  border-radius:4px 9px 5px 8px;
  cursor:pointer;
  transition:transform .15s ease, background .18s ease;
}
.keno-tools button:hover{background:rgba(255,197,61,.2);transform:translateY(-1px);}
.keno-tools button:active{transform:scale(.94);}

.keno-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
}
.keno-cell{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--chalk-soft);
  font-family:var(--type);font-size:13px;font-weight:700;
  border-radius:7px;
  cursor:pointer;
  transition:transform .14s ease, background .18s ease,
             border-color .18s ease, color .18s ease;
}
.keno-cell:hover{transform:translateY(-2px);border-color:rgba(255,197,61,.55);}
.keno-cell:active{transform:scale(.9);}
.keno-cell.picked{
  background:rgba(124,77,255,.42);
  border-color:#C0A6FF;color:#fff;
  box-shadow:0 0 12px rgba(124,77,255,.5);
}
/* выпало, но игрок не угадал — гасим, чтобы не спорило с попаданиями */
.keno-cell.drawn{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.4);
  color:var(--chalk);
}
.keno-cell.hit{
  background:var(--gold);border-color:#FFF0B8;
  color:#2A1A00;
  box-shadow:0 0 18px rgba(255,197,61,.75);
}
.keno-cell.drop{animation:keno-drop .42s cubic-bezier(.2,1.6,.4,1);}
@keyframes keno-drop{
  0%{transform:translateY(-16px) scale(1.3);opacity:.2;}
  60%{transform:translateY(0) scale(1.12);opacity:1;}
  100%{transform:none;}
}

.keno-status{
  margin-top:11px;text-align:center;
  font-family:var(--type);font-size:13.5px;
  color:var(--chalk-soft);min-height:20px;
}

/* --- слоты --- */
.slots-stage{position:relative;overflow:hidden;}
.slots-machine{
  position:relative;
  display:flex;gap:8px;justify-content:center;
  padding:10px;
  border:3px solid rgba(255,197,61,.35);
  border-radius:12px;
  background:rgba(0,0,0,.35);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.slots-machine.win{
  border-color:rgba(255,197,61,.9);
  box-shadow:0 0 26px rgba(255,197,61,.45) inset, 0 0 20px rgba(255,197,61,.3);
}
.slots-machine.jackpot{
  border-color:#FFE27A;
  animation:slots-jackpot .5s ease-in-out 3;
}
@keyframes slots-jackpot{
  0%,100%{box-shadow:0 0 26px rgba(255,197,61,.5) inset;}
  50%{box-shadow:0 0 46px rgba(255,197,61,1) inset, 0 0 34px rgba(255,197,61,.8);}
}

/* линия выплаты по центру — глазу нужно, за чем следить */
.slots-line{
  position:absolute;left:6px;right:6px;top:50%;
  height:2px;margin-top:-1px;
  background:linear-gradient(90deg, transparent, rgba(255,107,107,.85), transparent);
  z-index:2;pointer-events:none;
}

.reel{
  position:relative;
  flex:1;max-width:104px;
  height:84px;                 /* ровно одна ячейка: SLOT_CELL в app.js */
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(255,255,255,.06) 50%, rgba(0,0,0,.55));
  box-shadow:inset 0 0 14px rgba(0,0,0,.7);
}
.slot-cell{
  height:84px;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;line-height:1;
}
.reel.stopped{animation:reel-stop .32s cubic-bezier(.2,1.6,.4,1);}
@keyframes reel-stop{
  0%{transform:translateY(-5px);}
  60%{transform:translateY(3px);}
  100%{transform:none;}
}

.slots-pays{
  display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:3px;
}
.slots-pays::-webkit-scrollbar{display:none;}

.slots-win{
  margin-top:12px;text-align:center;min-height:24px;
  font-family:var(--type);font-size:17px;
  color:var(--chalk-soft);
}
.win-text{
  color:#FFE27A;
  text-shadow:0 0 18px rgba(255,197,61,.7);
  animation:win-pop .45s cubic-bezier(.2,1.6,.4,1);
  display:inline-block;
}
@keyframes win-pop{
  0%{transform:scale(.6);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}

/* быстрая ставка отзывается на нажатие */
.quick button.bump{animation:pop .28s cubic-bezier(.2,1.6,.4,1);}

/* казино — главный раздел, поэтому светится даже когда не открыт */
.nav button.hot{color:var(--gold);}
.nav button.hot .ni{
  filter:drop-shadow(0 0 8px rgba(255,197,61,.65));
  animation:nav-hot 2.6s ease-in-out infinite;
}
.nav button.hot.on{color:#FFE27A;}
@keyframes nav-hot{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}


/* =========================================================
   НАСТРОЙКИ ЗВУКА
   ========================================================= */

.sound-box.off{opacity:.55;}
.snd-pop.off{opacity:.6;}

/* кнопка звука в шапке */
.snd-btn{
  flex:none;
  width:36px;height:36px;
  margin-left:8px;
  border:2px solid var(--ink,#2A2340);
  border-radius:11px;
  background:rgba(255,255,255,.06);
  font-size:17px;line-height:1;
  cursor:pointer;
}
.snd-btn:active{transform:scale(.92);}

/*
 * Панель висит под кнопкой поверх экрана. Позиционируется от правого края
 * шапки, а не от кнопки: у кнопки нет своего слоя позиционирования, и
 * привязка к ней ломалась бы, как только рядом появится ещё один значок.
 */
.snd-pop{
  position:fixed;top:58px;right:10px;
  z-index:60;
  width:min(260px, calc(100vw - 20px));
  padding:10px 14px;
  border:2px solid var(--ink,#2A2340);
  border-radius:14px;
  background:#171227;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  animation:snd-pop-in .16s ease-out;
}
@keyframes snd-pop-in{
  from{opacity:0;transform:translateY(-8px) scale(.97);}
  to{opacity:1;transform:none;}
}
/*
 * Панель в профиле лежит на светлой бумаге, эта — на тёмном. Цвета
 * подписей, разделителей и дорожек ползунков заданы под бумагу, поэтому
 * здесь их приходится переопределить: иначе тёмное по тёмному.
 */
.snd-pop .snd-row{
  padding:7px 0;
  border-bottom-color:rgba(255,255,255,.14);
}
.snd-pop .snd-row:last-of-type{border-bottom:none;}
.snd-pop .snd-slider{padding:5px 0 8px;}
.snd-pop .snd-name{color:var(--chalk,#EDE7FF);}
.snd-pop .snd-name b{opacity:.85;}
.snd-pop .snd-range::-webkit-slider-runnable-track{background:rgba(255,255,255,.22);}
.snd-pop .snd-range::-moz-range-track{background:rgba(255,255,255,.22);}

.snd-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;
  border-bottom:1px dashed rgba(0,0,0,.18);
  cursor:pointer;
}
.snd-name{
  font-family:var(--hand);font-size:18px;
  color:var(--ink);
}
.snd-name b{font-family:var(--type);font-size:14px;opacity:.7;}

.snd-check{
  flex:none;
  width:22px;height:22px;
  accent-color:#7C4DFF;
  cursor:pointer;
}

.snd-slider{padding:11px 0 4px;}
.snd-slider .snd-name{display:block;margin-bottom:7px;}

.snd-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;margin:0;
  background:transparent;cursor:pointer;
}
.snd-range::-webkit-slider-runnable-track{
  height:8px;border-radius:4px;
  background:rgba(0,0,0,.22);
}
.snd-range::-moz-range-track{
  height:8px;border-radius:4px;
  background:rgba(0,0,0,.22);
}
.snd-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;margin-top:-7px;
  border-radius:50%;
  background:var(--gold);
  border:3px solid #2A1A00;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.snd-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);border:3px solid #2A1A00;
}
.snd-range:disabled{opacity:.5;cursor:default;}