/* Вокси, 2026-10-01: колесо бонусов — кабинет (wheel-card.tpl) и главная (home-wheel.tpl) */
.wxw-card{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center; margin:-18px 0 34px; padding:24px 29px; border-radius:25px; background:var(--surface,#fff); box-shadow:var(--shadow,0 6px 24px rgba(14,26,51,.07));
--w-a:#186aff; --w-b:#DCE8FF; --w-b-text:#1b4fca; --w-miss:#EEF1F6; --w-miss-text:#8592A8; --w-gold:#F2B33D; --w-gold-text:#0E1A33; --w-rim:#0E1A33; --w-bulb:#FFE7A8; --w-gold-bg:#fdf3e1; --w-gold-ink:#a86d08; --w-chip:#EAF1FF; }
.wxw-card:after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:var(--w-chip); z-index:0; }
.wxw-card > *{ position:relative; z-index:1; }
.wxw-box{ position:relative; width:220px; height:220px; filter:drop-shadow(0 10px 22px rgba(24,106,255,.18)); }
.wxw-box svg{ display:block; width:100%; height:100%; transition:transform 4.2s cubic-bezier(.15,.85,.2,1); }
.wxw-card.is-used .wxw-box{ opacity:.6; }
.wxw-pin{ position:absolute; left:50%; top:-8px; z-index:2; width:26px; height:32px; transform:translateX(-50%); background:var(--w-gold); clip-path:polygon(50% 100%,0 30%,0 0,100% 0,100% 30%); border-radius:6px 6px 0 0; }
.wxw-hub{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:var(--surface,#fff); box-shadow:0 0 0 5px var(--w-rim),0 4px 12px rgba(0,0,0,.2); display:grid; place-items:center; color:var(--primary,#186aff); font-size:13px; font-weight:800; letter-spacing:-.02em; }
.wxw-text h3{ margin:0 0 4px; color:var(--text,#0E1A33); font-size:20px; font-weight:800; }
.wxw-text p{ margin:0 0 14px; max-width:46ch; color:var(--text-soft,#4F5E7B); font-size:14.5px; line-height:1.5; }
.wxw-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.wxw-chip{ padding:4px 10px; border-radius:999px; background:var(--w-chip); color:var(--primary,#186aff); font-size:12.5px; font-weight:800; }
.wxw-act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.wxw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border:0; border-radius:12px; background:var(--primary,#186aff); color:#fff; font-size:14.5px; font-weight:800; cursor:pointer; transition:.2s ease; }
.wxw-btn:hover{ background:var(--primary-dark,#0d56d6); }
.wxw-btn:focus-visible{ outline:3px solid rgba(24,106,255,.45); outline-offset:2px; }
.wxw-btn[disabled]{ background:var(--line,#E1E8F2); color:var(--muted,#8592A8); cursor:default; }
.wxw-note{ color:var(--muted,#8592A8); font-size:13.5px; font-weight:700; }
.wxw-win{ margin-top:12px; padding:10px 14px; border-radius:12px; background:var(--w-gold-bg); color:var(--w-gold-ink); font-weight:800; }
.wxw-win.is-miss{ background:var(--w-chip); color:var(--text-soft,#4F5E7B); }
html[data-theme="dark"] .wxw-card{ --w-a:#3D7BFF; --w-b:#1C2A44; --w-b-text:#9DBBFF; --w-miss:#202836; --w-miss-text:#7E8AA0; --w-gold:#E9A82F; --w-gold-text:#0E1A33; --w-rim:#0A0F17; --w-bulb:#F2C665; --w-gold-bg:#2E2614; --w-gold-ink:#F2C665; --w-chip:#1C2A44; background:var(--wd-surface,#151b24); box-shadow:none; }
html[data-theme="dark"] .wxw-text h3{ color:var(--wd-text,#f1f5f9); }
html[data-theme="dark"] .wxw-text p, html[data-theme="dark"] .wxw-win.is-miss{ color:var(--wd-text2,#94a3b8); }
html[data-theme="dark"] .wxw-hub{ background:var(--wd-surface,#151b24); color:#4D8DFF; }
html[data-theme="dark"] .wxw-chip{ color:#9DBBFF; }
html[data-theme="dark"] .wxw-btn[disabled]{ background:var(--wd-line,#334155); color:var(--wd-text2,#94a3b8); }
@media (max-width:820px){
.wxw-card{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; padding:22px 18px; border-radius:20px; }
.wxw-chips, .wxw-act{ justify-content:center; }
.wxw-text p{ margin-inline:auto; }
}
@media (max-width:620px){
.wxw-box{ width:240px; height:240px; }
.wxw-act .wxw-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .wxw-box svg{ transition:none; } }

/* главная: приглашение внизу экрана и окно с колесом */
.wxw-teaser{position:fixed;left:20px;bottom:20px;z-index:1030;display:flex;align-items:center;gap:12px;width:340px;max-width:calc(100vw - 24px);padding:12px 14px;border:1px solid #E1E8F2;border-radius:16px;background:#fff;color:#0E1A33;box-shadow:0 12px 32px rgba(14,26,51,.16);animation:wxw-in .25s ease-out}
.wxw-teaser[hidden]{display:none}
.wxw-teaser-wheel{flex:none;width:48px;height:48px;border-radius:50%;background:conic-gradient(#186aff 0 20%,#DCE8FF 0 40%,#F2B33D 0 55%,#186aff 0 75%,#EEF1F6 0 85%,#DCE8FF 0);box-shadow:0 0 0 4px #0E1A33}
.wxw-teaser-text{flex:1 1 auto;min-width:0;line-height:1.3}
.wxw-teaser-text b{display:block;font-size:15px;font-weight:800}
.wxw-teaser-text span{color:#4F5E7B;font-size:13px}
.wxw-teaser .wxw-btn{padding:10px 14px;font-size:14px;flex:none}
.wxw-teaser-x{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border:1px solid #E1E8F2;border-radius:50%;background:#fff;color:#4F5E7B;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.wxw-modal{position:fixed;inset:0;z-index:1060;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(14,26,51,.55);animation:wxw-in .2s ease-out}
.wxw-modal[hidden]{display:none}
.wxw-modal-in{position:relative;width:100%;max-width:720px;max-height:calc(100vh - 32px);overflow:auto;border-radius:25px}
.wxw-modal .wxw-card{margin:0}
.wxw-modal-x{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:#F2F3F5;color:#0E1A33;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.wxw-win a{color:inherit;text-decoration:underline}
@keyframes wxw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:991px){.wxw-teaser{left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media (max-width:620px){.wxw-modal{align-items:flex-end;padding:0}.wxw-modal-in{max-height:92vh;border-radius:22px 22px 0 0}.wxw-modal .wxw-card{border-radius:22px 22px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}
html[data-theme="dark"] .wxw-teaser{background:var(--wd-surface,#151b24);color:var(--wd-text,#f1f5f9);border-color:var(--wd-line,#334155)}
html[data-theme="dark"] .wxw-teaser-text span{color:var(--wd-text2,#94a3b8)}
html[data-theme="dark"] .wxw-teaser-x,html[data-theme="dark"] .wxw-modal-x{background:var(--wd-line,#334155);color:var(--wd-text,#f1f5f9);border-color:var(--wd-line,#334155)}
@media (prefers-reduced-motion:reduce){.wxw-teaser,.wxw-modal{animation:none}}

/* Вокси, 08.10.2026: колесо в стиле страниц «Бонусы»: разноцветные секторы, мягкие карточки и кнопки */
.wxw-card{ --w-a:#186AFF; --w-b:#8A3FFC; --w-b-text:#FFFFFF; --w-miss:#F2F3F5; --w-miss-text:#8A8F9A; --w-gold:#FFB800; --w-gold-text:#4A2A00; --w-rim:#15171C; --w-bulb:#FFD34D; --w-gold-bg:#FFF4D6; --w-gold-ink:#8A5200; --w-chip:#F2F3F5;
  border-radius:32px; padding:30px 34px; box-shadow:none; background:#FFFFFF; }
.wxw-card:after{ right:-120px; top:-120px; width:420px; height:420px; background:conic-gradient(from 200deg,#186AFF,#8A3FFC,#FF4F9A,#FF9A3C,#186AFF); filter:blur(80px); opacity:.28; }
.wxw-box{ filter:drop-shadow(0 18px 36px rgba(106,60,240,.25)); }
.wxw-pin{ background:linear-gradient(180deg,#FFD34D,#E08A00); }
.wxw-hub{ background:radial-gradient(circle at 32% 28%,#FFF4C4,#FFC21A 45%,#E08A00); color:#7A4A00; box-shadow:0 0 0 5px #15171C,0 6px 16px rgba(0,0,0,.25); }
.wxw-text h3{ font-size:26px; letter-spacing:-0.02em; color:#15171C; }
.wxw-text p{ color:#4B505B; font-size:15.5px; }
.wxw-chip{ padding:7px 12px; border-radius:12px; background:#F2F3F5; color:#15171C; font-size:13.5px; }
.wxw-btn{ min-height:52px; padding:0 26px; border-radius:16px; background:#186AFF; font-size:16px; }
.wxw-btn:hover{ background:#0F55D4; }
.wxw-btn[disabled]{ background:#F2F3F5; color:#8A8F9A; }
.wxw-win{ border-radius:16px; padding:14px 16px; }
.wxw-teaser{ border:0; border-radius:22px; padding:14px 16px; box-shadow:0 18px 44px rgba(21,23,28,.18); }
.wxw-teaser-wheel{ background:conic-gradient(#186AFF 0 16%,#8A3FFC 0 32%,#FFB800 0 44%,#FF4F9A 0 60%,#F2F3F5 0 72%,#0FA37F 0 86%,#FF9A3C 0); box-shadow:0 0 0 4px #15171C; }
.wxw-teaser .wxw-btn{ min-height:44px; padding:0 16px; border-radius:14px; }
.wxw-teaser-x{ border:0; background:#F2F3F5; }
.wxw-modal{ background:rgba(21,23,28,.55); }
.wxw-modal-in{ border-radius:32px; }
.wxw-modal-x{ background:#F2F3F5; border-radius:14px; }
html[data-theme="dark"] .wxw-card{ --w-a:#3D7BFF; --w-b:#8A3FFC; --w-b-text:#FFFFFF; --w-miss:#26262E; --w-miss-text:#9A9EA8; --w-rim:#0A0A0E; --w-chip:#26262E; background:#18181E; }
html[data-theme="dark"] .wxw-card:after{ opacity:.45; }
html[data-theme="dark"] .wxw-text h3{ color:#FFFFFF; }
html[data-theme="dark"] .wxw-chip{ background:#26262E; color:#FFFFFF; }
html[data-theme="dark"] .wxw-btn{ background:#FFFFFF; color:#0E0E12; }
html[data-theme="dark"] .wxw-teaser{ background:#18181E; }
@media (max-width:620px){ .wxw-modal-in, .wxw-modal .wxw-card{ border-radius:28px 28px 0 0; } }