/* NLauncher /emotes v3 = v2 + pair emotes «Вдвоём» (EMOTES.md §12): the «Вдвоём ⇄» card badge, the pill and the «позови друга» block in the detail view. Versioned filename: never edit in place. */
/* NLauncher public emotes catalog (/emotes, /emotes/<id>) v2 — e2 design, rarity ladder from EMOTES.md §7.1.
 * v2: the detail dialog has a definite height, so a long info column scrolls instead of stretching the stage past the fold.
 * Versioned filename: never edit in place (the front proxy caches /assets/* and ignores ?v=) — copy to emotes.v3.css. */
@property --gc{syntax:'<color>';inherits:true;initial-value:#9AA3AE}
:root{
  --bg:#F6F7F9; --panel:#FFFFFF; --panel2:#F3F5F9; --ink:#0B0B0F; --ink2:#4A4F5A; --mut:#6B7280; --mut2:#8A909C;
  --bd:rgba(11,11,15,.08); --bd2:rgba(11,11,15,.14); --ac:#2E6CF6; --ac2:#1E56D6; --ac-soft:rgba(46,108,246,.10); --ac-tx:#1E56D6;
  --ok:#16A34A;
  --shadow:0 1px 2px rgba(11,18,32,.04),0 10px 30px -14px rgba(11,18,32,.16); --shadow-lg:0 30px 70px -24px rgba(11,18,32,.35);
  /* stage */
  --st1:#FFFFFF; --st2:#EEF2F8; --st3:#E2E8F3; --sec-a:rgba(255,255,255,.92); --sec-b:rgba(236,241,249,.92); --sec-bd:rgba(11,18,32,.07);
  --tile:#FFFFFF; --tile-sh:0 8px 18px -8px rgba(11,18,32,.28);
  --key:#FFFFFF; --key-bd:rgba(11,11,15,.16);
  /* rarity: fill (EMOTES.md §7.1) and readable text */
  --r-common:#9AA3AE; --r-uncommon:#58B947; --r-rare:#4A8FE7; --r-epic:#A461E0; --r-legendary:#E8B530; --r-mythic:#E5484D;
  --t-common:#6B7480; --t-uncommon:#2E8A22; --t-rare:#2464C2; --t-epic:#8040C2; --t-legendary:#946A00; --t-mythic:#C42329;
  --gold:#F2B705; --hit-bg:#FFF4CC; --hit-tx:#7A5600;
  --sans:'Onest',-apple-system,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0B0B0F; --panel:#14151C; --panel2:#1A1C24; --ink:#F3F6FC; --ink2:#C9CDD6; --mut:#8A909C; --mut2:#6B7280;
  --bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.13); --ac:#4C82FF; --ac2:#2E6CF6; --ac-soft:rgba(76,130,255,.14); --ac-tx:#93B8FF; --ok:#6FE3A0;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.8);
  --st1:#1B2030; --st2:#12151F; --st3:#0D0F16; --sec-a:rgba(32,36,50,.88); --sec-b:rgba(24,27,38,.88); --sec-bd:rgba(255,255,255,.06);
  --tile:#2A2F42; --tile-sh:0 0 0 1px rgba(255,255,255,.07),0 10px 22px -10px rgba(0,0,0,.8); --key:#232738; --key-bd:rgba(255,255,255,.16);
  --t-common:#A9B1BC; --t-uncommon:#7BD06A; --t-rare:#80B1FF; --t-epic:#C79AF6; --t-legendary:#F2C95C; --t-mythic:#FF7C80;
  --hit-bg:rgba(242,183,5,.16); --hit-tx:#F6CD4F;
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0B0B0F; --panel:#14151C; --panel2:#1A1C24; --ink:#F3F6FC; --ink2:#C9CDD6; --mut:#8A909C; --mut2:#6B7280;
  --bd:rgba(255,255,255,.07); --bd2:rgba(255,255,255,.13); --ac:#4C82FF; --ac2:#2E6CF6; --ac-soft:rgba(76,130,255,.14); --ac-tx:#93B8FF; --ok:#6FE3A0;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.8);
  --st1:#1B2030; --st2:#12151F; --st3:#0D0F16; --sec-a:rgba(32,36,50,.88); --sec-b:rgba(24,27,38,.88); --sec-bd:rgba(255,255,255,.06);
  --tile:#2A2F42; --tile-sh:0 0 0 1px rgba(255,255,255,.07),0 10px 22px -10px rgba(0,0,0,.8); --key:#232738; --key-bd:rgba(255,255,255,.16);
  --t-common:#A9B1BC; --t-uncommon:#7BD06A; --t-rare:#80B1FF; --t-epic:#C79AF6; --t-legendary:#F2C95C; --t-mythic:#FF7C80;
  --hit-bg:rgba(242,183,5,.16); --hit-tx:#F6CD4F;
  color-scheme:dark; }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ac);color:#fff}
a{color:var(--ac-tx);text-decoration:none}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
.nli{display:inline-block;vertical-align:-.16em;flex:none}
[hidden]{display:none!important}
a,button{transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
kbd{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;padding:0 .45em;border-radius:.45em;border:1px solid var(--key-bd);border-bottom-width:3px;background:var(--key);color:var(--ink);font:800 .82em/1 var(--sans);vertical-align:.05em}

.r-common{--rc:var(--r-common);--rt:var(--t-common);--lv:1} .r-uncommon{--rc:var(--r-uncommon);--rt:var(--t-uncommon);--lv:2}
.r-rare{--rc:var(--r-rare);--rt:var(--t-rare);--lv:3} .r-epic{--rc:var(--r-epic);--rt:var(--t-epic);--lv:4}
.r-legendary{--rc:var(--r-legendary);--rt:var(--t-legendary);--lv:5} .r-mythic{--rc:var(--r-mythic);--rt:var(--t-mythic);--lv:6}

/* ===== top bar (same as the other e2 pages) ===== */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.top nav{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.brand span{font-weight:900;font-size:18px;letter-spacing:-.03em}
.tabs{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--bd);font-size:14.5px;font-weight:600}
.tabs a{padding:8px 14px;border-radius:10px;color:var(--ink2)}
.tabs a:hover{background:var(--panel);color:var(--ink)}
.tabs a.on,.tabs .nlx-tr.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--ac);color:var(--ac)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel);color:var(--ink);font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--ac);color:var(--ac-tx)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 12px 26px -14px rgba(46,108,246,.9)}
.btn.pri:hover{background:var(--ac2);color:#fff}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:10px}
.btn.lg{height:52px;padding:0 24px;font-size:15.5px;border-radius:14px}
.me{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 5px;border-radius:12px;border:1px solid var(--bd2);color:var(--ink);font-weight:700;font-size:14px;max-width:180px}
.me:hover{border-color:var(--ac);color:var(--ac-tx)}
.me .av{width:30px;height:30px;border-radius:9px;background:var(--ac);color:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.me span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.wrap{max-width:1240px;margin:0 auto;padding:28px 24px 64px}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:24px;box-shadow:var(--shadow)}

/* ===== hero ===== */
.em-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);overflow:hidden;min-height:600px}
.em-hero .info{padding:48px 44px 40px;display:flex;flex-direction:column;gap:22px;min-width:0}
.em-hero h1{margin:0;font-size:clamp(52px,7.4vw,100px);font-weight:900;letter-spacing:-.055em;line-height:.9;display:flex;align-items:flex-start}
.em-hero h1 .count{margin:.1em 0 0 .14em;font-size:max(15px,.2em);letter-spacing:-.01em;line-height:1;padding:.32em .6em .34em;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:800;font-variant-numeric:tabular-nums}
.lead{margin:0;font-size:17.5px;line-height:1.55;color:var(--ink2);max-width:30em}
.hero-cats{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;max-width:470px}
.hero-cats a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:5px 10px;padding:7px 0 6px;color:var(--ink);font-weight:700;font-size:14.5px}
.hero-cats a span{font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;font-size:13.5px}
.hero-cats a i{grid-column:1/-1;display:block;height:3px;border-radius:2px;background:var(--bd);position:relative;overflow:hidden}
.hero-cats a i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:color-mix(in srgb,var(--ink) 58%,transparent);border-radius:2px;transition:background .16s ease}
.hero-cats a:hover{color:var(--ac-tx)}
.hero-cats a:hover i::after{background:var(--ac)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.free-note{margin:-8px 0 0;font-size:13px;color:var(--mut)}

/* stage + the wheel (in-game radial menu: 8 sectors, slot 0 on top, clockwise) */
.stage{position:relative;overflow:hidden;background:radial-gradient(75% 70% at 50% 46%,var(--st1) 0%,var(--st2) 62%,var(--st3) 100%)}
.stage canvas{position:absolute;z-index:3;display:block}
.wheel-stage{border-left:1px solid var(--bd);min-height:600px;--d:500px;--tile:72px}
.wheel{position:absolute;left:50%;top:calc(50% - 30px);width:var(--d);height:var(--d);transform:translate(-50%,-50%);--band:calc(var(--tile) + 26px)}
.wheel::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gc) 34%,transparent),transparent);transition:--gc .7s ease;z-index:0}
.wheel .ring,.wheel .hl,.wheel .hl::after{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--band)),#000 calc(100% - var(--band) + .5px));mask:radial-gradient(closest-side,transparent calc(100% - var(--band)),#000 calc(100% - var(--band) + .5px))}
.wheel .ring{z-index:1;background:conic-gradient(from -22.5deg,var(--sec-a) 0 44.3deg,var(--sec-bd) 0 45deg,var(--sec-b) 0 89.3deg,var(--sec-bd) 0 90deg,var(--sec-a) 0 134.3deg,var(--sec-bd) 0 135deg,var(--sec-b) 0 179.3deg,var(--sec-bd) 0 180deg,var(--sec-a) 0 224.3deg,var(--sec-bd) 0 225deg,var(--sec-b) 0 269.3deg,var(--sec-bd) 0 270deg,var(--sec-a) 0 314.3deg,var(--sec-bd) 0 315deg,var(--sec-b) 0 359.3deg,var(--sec-bd) 0);box-shadow:inset 0 0 0 1px var(--sec-bd)}
.wheel .hl{z-index:2;transform:rotate(var(--rot,0deg));transition:transform .6s cubic-bezier(.3,1.25,.4,1),opacity .3s ease;background:conic-gradient(from -22.5deg,color-mix(in srgb,var(--gc) 24%,transparent) 0 45deg,transparent 0);opacity:0;transition-property:transform,opacity,--gc}
.wheel .hl::after{content:"";--band:5px;background:conic-gradient(from -22.5deg,var(--gc) 0 45deg,transparent 0)}
.wheel.lit .hl{opacity:1}
.wheel .slots{position:absolute;inset:0;z-index:4}
.slot{position:absolute;left:calc(50% + var(--x) - var(--tile) / 2);top:calc(50% + var(--y) - var(--tile) / 2);width:var(--tile);height:var(--tile);padding:0;border:0;border-radius:18px;background:var(--tile);box-shadow:inset 0 -4px 0 var(--rc),var(--tile-sh);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.slot img{width:92%;height:92%;object-fit:contain;display:block}
.slot:hover{transform:scale(1.06)}
.slot.on{transform:scale(1.1);box-shadow:inset 0 -4px 0 var(--rc),0 0 0 2.5px var(--rc),var(--tile-sh)}
.stage .shadow{position:absolute;z-index:2;width:120px;height:22px;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(11,18,32,.28),transparent);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s ease}
:root[data-theme="dark"] .stage .shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.now{position:absolute;left:50%;top:calc(50% - 30px + var(--d) / 2 + 12px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:8px 16px 8px 9px;border-radius:16px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--bd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.now kbd{font-size:15px}
.now span{display:flex;flex-direction:column;min-width:0}
.now b{font-size:15px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis}
.now small{font-size:12px;font-weight:700;color:var(--rt,var(--mut))}
.stage .flat{position:absolute;inset:0;margin:auto;z-index:3;width:46%;max-width:240px;object-fit:contain}

/* ===== how it works ===== */
.how{margin-top:20px;padding:30px 32px 26px;border-radius:24px;background:var(--panel);border:1px solid var(--bd);box-shadow:var(--shadow);scroll-margin-top:84px}
.how h2{margin:0 0 20px;font-size:22px;font-weight:900;letter-spacing:-.03em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:0 24px;border-left:1px solid var(--bd);min-width:0}
.steps li:first-child{padding-left:0;border-left:0}
.steps li::before{content:counter(st);grid-row:span 2;min-width:.62em;font-size:34px;font-weight:900;line-height:.9;letter-spacing:-.04em;color:var(--ac)}
.steps b{font-size:16px;font-weight:800;letter-spacing:-.015em}
.steps b kbd{font-size:13px;margin:0 1px}
.steps span{font-size:14px;color:var(--ink2);line-height:1.5}
.rail{margin-top:26px;padding-top:20px;border-top:1px solid var(--bd)}
.rail-line{height:4px;border-radius:99px;background:var(--ac);position:relative;margin:0 26px}
.rail-ticks{list-style:none;margin:8px 0 0;padding:0;display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.rail-ticks li{position:relative;width:52px;text-align:center}
.rail-ticks li::before{content:"";position:absolute;left:50%;top:-15px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--panel);border:2px solid var(--ac)}
.rail-ticks li:first-child::before,.rail-ticks li:last-child::before{background:var(--ac)}
.rail p{margin:14px 0 0;font-size:13.5px;color:var(--mut)}

/* ===== catalog ===== */
.sec-block{margin-top:44px;scroll-margin-top:80px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.sec-head .res{font-size:14.5px;font-weight:600;color:var(--mut)}
.sec-head .res b{color:var(--ink);font-variant-numeric:tabular-nums}
.linkbtn{border:0;background:none;color:var(--ac-tx);font-weight:700;cursor:pointer;padding:0;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:11px;border:1px solid var(--bd2);background:var(--panel);font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap;flex:none}
.chip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .n{font-size:12px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.chip.dim{opacity:.45}
.chip .sw{width:12px;height:12px;border-radius:3px;background:var(--rc);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.chip.on .sw{box-shadow:0 0 0 2px var(--bg)}
.chip .inf{font-size:17px;line-height:1;font-weight:800}
.chip .star{color:var(--gold);font-size:14px}
.filters{padding:14px;display:flex;flex-direction:column;gap:12px}
.scroller{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}
.frow{display:flex;gap:8px;align-items:center;min-width:0}
.search{flex:1;min-width:0;position:relative}
.search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel2);color:var(--ink);font-size:15px;padding:0 14px 0 40px;outline:none}
.search input:focus{border-color:var(--ac);background:var(--panel)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut)}
.sel{height:44px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel2);color:var(--ink);font-size:14px;font-weight:600;padding:0 10px;cursor:pointer;min-width:0}
.fgroups{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.fg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.fg .chip{height:34px;padding:0 11px;font-size:13px}
.fg+.fg{padding-left:18px;border-left:1px solid var(--bd)}
.ftoggle{display:none}

.grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.em{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--bd);border-radius:18px;overflow:hidden;color:var(--ink);box-shadow:var(--shadow);min-width:0;text-decoration:none}
.em:hover{border-color:color-mix(in srgb,var(--rc) 70%,transparent)}
.em:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.em .pic{position:relative;aspect-ratio:1/1;background:radial-gradient(80% 70% at 50% 58%,var(--panel) 0%,var(--panel2) 80%)}
.em.fancy .pic{background:radial-gradient(80% 70% at 50% 58%,color-mix(in srgb,var(--rc) 24%,var(--panel)) 0%,color-mix(in srgb,var(--rc) 9%,var(--panel2)) 82%)}
.em.fancy::before{content:"";position:absolute;z-index:2;top:0;left:14px;right:14px;height:4px;border-radius:0 0 3px 3px;background:var(--rc)}
.em .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.em .pic .live{opacity:0;transition:opacity .12s ease}
.em .pic .live.ready{opacity:1}
.em .pic .live.ready~.poster,.em .pic .poster.hide{opacity:0}
.em .spark{position:absolute;z-index:1;font-style:normal;font-weight:900;font-size:17px;line-height:1;color:var(--rc);pointer-events:none}
.em .spark.s1{left:13%;top:30%}
.em .spark.s2{right:14%;top:52%;font-size:13px}
.em .badges{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.b-hit{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;background:var(--hit-bg);color:var(--hit-tx);font-size:11.5px;font-weight:800}
.b-hit::before{content:"★";color:var(--gold);font-size:12px}
.b-loop{margin-left:auto;display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:99px;background:rgba(17,20,28,.66);color:#fff;font-size:16px;font-weight:800;line-height:1}
.em .meta{padding:10px 14px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.em .nm{font-weight:800;font-size:14.5px;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em .sub{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.em .rar{font-size:12.5px;font-weight:700;color:var(--rt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em .bar{height:4px;margin:0 14px 12px;border-radius:3px;background:var(--rc)}
.coin{width:16px;height:16px;flex:none;display:block}
.price{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.price.free{color:var(--ok);font-size:13px}
.more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.more-n{font-size:13.5px;font-weight:600;color:var(--mut)}
.none{grid-column:1/-1;color:var(--mut);font-size:15px;padding:44px 18px;border:1px dashed var(--bd2);border-radius:18px;text-align:center}
.none button{margin-top:12px}
.seo-list{grid-column:1/-1;columns:4 200px;font-size:13px}
.seo-list a{display:block;color:var(--ink2);padding:2px 0}
.seo-lead{grid-column:1/-1}

/* ===== modal ===== */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box{position:relative;width:min(1060px,100%);height:min(860px,calc(100vh - 48px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);grid-template-rows:minmax(0,1fr);overflow:hidden;background:var(--panel);border-radius:26px;box-shadow:var(--shadow-lg);border:1px solid var(--bd)}
.m-stage{min-height:0}
.m-stage::before{content:"";position:absolute;left:var(--gx,50%);top:var(--gy,44%);width:min(74%,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gc) 30%,transparent),transparent);transition:--gc .6s ease;z-index:0}
.m-stage canvas{cursor:grab;touch-action:pan-y}
.m-stage canvas:active{cursor:grabbing}
.m-nav{position:absolute;z-index:6;left:14px;top:14px;display:flex;align-items:center;gap:4px;padding:3px;border-radius:13px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--bd);backdrop-filter:blur(6px);font-size:12.5px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.m-nav span{padding:0 4px}
.nb{width:32px;height:32px;border-radius:10px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.nb:hover{background:var(--panel2)}
.prog{position:absolute;z-index:6;left:0;right:0;bottom:0;height:3px;background:transparent}
.prog i{display:block;height:100%;width:0;background:var(--gc)}
.ctrls{position:absolute;z-index:6;left:12px;right:12px;bottom:14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.ctrls .cg{display:flex;gap:4px;padding:3px;border-radius:14px;background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--bd);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ctrls .chip{height:34px;border:0;background:transparent;padding:0 11px;font-size:13px}
.ctrls .chip:hover{background:var(--panel2)}
.ctrls .chip.on{background:var(--ink);color:var(--bg)}
.nickf{display:flex;gap:4px;padding:3px;border-radius:14px;background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--bd);backdrop-filter:blur(8px)}
.nickf input{width:150px;height:34px;border:0;border-radius:10px;background:var(--panel2);padding:0 11px;font-size:14px;font-weight:600;outline:none;color:var(--ink)}
.nickf input:focus{box-shadow:inset 0 0 0 1.5px var(--ac)}
.nickf .chip{height:34px;border:0}
.modal .side{padding:30px 28px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-width:0}
.modal .side>*{flex-shrink:0}
.modal .x{position:absolute;top:12px;right:12px;z-index:8;width:40px;height:40px;border-radius:12px;border:1px solid var(--bd2);background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.modal .x:hover{border-color:var(--ac);color:var(--ac)}
.pills{display:flex;flex-wrap:wrap;gap:6px;padding-right:48px}
.pill{display:inline-flex;align-items:center;gap:5px;height:26px;font-size:12.5px;font-weight:700;padding:0 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--bd);color:var(--ink2);white-space:nowrap}
.pill.rar{color:var(--rt);background:color-mix(in srgb,var(--rc) 16%,var(--panel));border-color:color-mix(in srgb,var(--rc) 45%,transparent)}
.pill.rar::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--rc)}
.pill.hit{background:var(--hit-bg);color:var(--hit-tx);border-color:transparent}
.pill.hit::before{content:"★";color:var(--gold)}
.pill .inf{font-size:15px;line-height:1}
.modal h2{margin:0;font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1.02}
.modal .desc{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.facts>div{padding:11px 13px;border-left:1px solid var(--bd);min-width:0;display:flex;flex-direction:column;gap:5px}
.facts>div:first-child{border-left:0}
.facts span{font-size:12px;font-weight:600;color:var(--mut)}
.facts b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.meter{display:flex;gap:3px;align-items:center;height:15px}
.meter i{width:9px;height:9px;border-radius:2px;background:var(--bd2)}
.meter i.f{background:var(--rc)}
.big-price{display:flex;align-items:center;gap:9px;font-size:28px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.big-price img{width:28px;height:28px}
.big-price small{font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:0}
.big-price.free{font-size:22px;color:var(--ok)}
.ingame{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--panel2);border:1px solid var(--bd)}
.ingame kbd{grid-row:span 2;font-size:20px}
.ingame b{font-size:14.5px;font-weight:800}
.ingame span{font-size:13.5px;color:var(--ink2);line-height:1.45}
.m-actions{display:flex;flex-wrap:wrap;gap:8px}
.m-actions .btn.pri{flex:1 1 100%}
.share{display:flex;align-items:center;gap:6px;height:46px;padding:0 5px 0 14px;border-radius:13px;border:1px solid var(--bd2);background:var(--panel2);min-width:0}
.share svg{flex:none;color:var(--mut)}
.share input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--ink2);outline:none;text-overflow:ellipsis}
.share .btn{height:36px;padding:0 13px;font-size:13.5px;border-radius:10px;flex:none}
.modal .box:focus{outline:none}
.rel h4{margin:0 0 10px;font-size:13.5px;font-weight:800;color:var(--ink2)}
.rel .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rel a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border-radius:14px;background:var(--panel2);border:1px solid var(--bd);color:var(--ink);font-size:11.5px;font-weight:700;text-align:center;line-height:1.2;min-width:0;box-shadow:inset 0 -3px 0 var(--rc)}
.rel a:hover{border-color:var(--rc)}
.rel img{width:100%;aspect-ratio:1;object-fit:contain}
.rel a span{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.4em}
.note{font-size:12.5px;color:var(--mut);line-height:1.45;margin:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:var(--shadow-lg)}

.foot-site{border-top:1px solid var(--bd);margin-top:56px}
.foot-site>div{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;color:var(--mut);font-size:13px}
.foot-site nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-site a{color:var(--ink2)}
body.lock{overflow:hidden}
body.lock #supportchat-widget-container{display:none!important}

@media (max-width:1080px){
  .em-hero .info{padding:40px 32px 32px}
  .hero-cats{gap:2px 20px}
}
@media (max-width:860px){
  .tabs{display:none}
  .em-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .wheel-stage{order:-1;border-left:0;border-bottom:1px solid var(--bd);min-height:0;height:calc(var(--d) + 96px)}
  .wheel{top:calc(50% - 32px)}
  .now{top:calc(50% - 32px + var(--d) / 2 + 12px)}
  .steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .steps li{padding:0;border-left:0}
  .modal{padding:0;align-items:stretch}
  .modal .box{grid-template-columns:minmax(0,1fr);max-height:none;height:100%;border-radius:0;overflow-y:auto;display:block}
  .m-stage{min-height:0;height:min(60vh,500px)}
  .modal .side{overflow:visible;padding:22px 18px 30px}
}
@media (max-width:560px){
  .top nav{padding:10px 16px;gap:10px}
  .brand span{display:none}
  .wrap{padding:16px 16px 48px}
  .card{border-radius:20px}
  .em-hero .info{padding:24px 18px 22px;gap:18px}
  .em-hero h1{font-size:60px}
  .lead{font-size:16px}
  .hero-cats{gap:0 16px}
  .hero-cats a{font-size:14px}
  .hero-actions .btn{flex:1 1 100%}
  .now{padding:6px 12px 6px 7px}
  .how{padding:22px 18px 20px;border-radius:20px}
  .rail-line{margin:0 22px}
  .rail-ticks{font-size:11.5px}
  .rail-ticks li{width:44px}
  .rail-ticks li:nth-child(even){visibility:hidden}
  .sec-block{margin-top:34px}
  .filters{padding:12px}
  .frow.top-row{flex-wrap:wrap}
  .frow.top-row .search{flex:1 1 100%}
  .frow.top-row .sel{flex:1 1 0}
  .frow.top-row #f-price{display:none;order:5;flex:1 1 100%}
  .filters.open .frow.top-row #f-price{display:block}
  .ftoggle{display:inline-flex;height:44px;border-radius:12px}
  .fgroups{display:none}
  .filters.open .fgroups{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .fg+.fg{padding-left:0;border-left:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .em{border-radius:16px}
  .em .meta{padding:9px 11px 10px}
  .em .nm{font-size:13.5px}
  .em .bar{margin:0 11px 10px}
  .em .rar{font-size:11.5px}
  .em .badges{top:8px;left:8px;right:8px}
  .b-hit{font-size:10.5px;padding:0 7px;height:20px}
  .b-loop{height:20px;font-size:14px}
  .price{font-size:13px}
  .coin{width:14px;height:14px}
  .modal h2{font-size:27px}
  .facts>div{padding:10px}
  .facts b{font-size:14px}
  .me span:last-child{display:none}
  .me{padding:0 5px}
  .ctrls{bottom:10px;gap:6px}
  .ctrls .chip{padding:0 9px;font-size:12.5px}
  .m-nav{left:10px;top:10px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .wheel .hl,.slot,.wheel::before,.m-stage::before{transition:none} }

/* v3: pair emotes «Вдвоём» */
.em .badges .bl{display:inline-flex;align-items:center;gap:6px;min-width:0}
.b-pair{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;background:#0E9384;color:#fff;font-size:11.5px;font-weight:800;white-space:nowrap}
.b-pair::after{content:"⇄";font-size:12px;line-height:1}
.pill.pair{background:color-mix(in srgb,#0E9384 14%,var(--panel));color:#0B7A6E;border-color:color-mix(in srgb,#0E9384 40%,transparent)}
.pill.pair::after{content:"⇄"}
:root[data-theme="dark"] .pill.pair{color:#5FD3C5}
.ingame.duo{border-color:color-mix(in srgb,#0E9384 45%,transparent);background:color-mix(in srgb,#0E9384 8%,var(--panel2))}
.ingame.duo kbd+kbd{margin-left:4px}
.ingame .keys{grid-row:span 2;display:inline-flex;align-items:center;gap:6px}
@media (max-width:560px){ .b-pair{font-size:10.5px;padding:0 7px;height:20px} }