/* =====================================================================
   PLAZMO — site stylesheet
   One file for every page. Tokens first, then shell, then components,
   then lobby blocks, then responsive rules and motion.
   Read COMPONENTS.md before adding anything.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme:dark;
  /* palette */
  --soot:#0C0C0C;            /* Lava Rock — page background */
  --soot-2:#0E0C0C;          /* rail, bottom nav, raised background */
  --char:#201E1F;            /* surface 1: cards, inputs, chips */
  --char-2:#2A2627;          /* surface 2: hover, nested */
  --char-3:#353031;          /* surface 3: pressed */
  --dlg:#151313;             /* dialogs, popovers */
  --oxide:#420804;
  --ember:#8E1504;
  --flare:#FF9900;           /* the one accent */
  --flare-hi:#FFAD33;
  --core:#FFF1D6;            /* peaks only: big win, crash peak */
  --bone:#F3F0EB;            /* Cloud Dancer — text */
  --bone-2:rgba(243,240,235,.82); /* long-read text */
  --ash:#9C9592;             /* secondary text */
  --line:rgba(243,240,235,.10);
  --line-2:rgba(243,240,235,.18);
  --line-3:rgba(243,240,235,.32);
  /* semantic status — never use Flare for status */
  --ok:#3DDC84;   --ok-bg:rgba(61,220,132,.12);
  --pend:#7AB8FF; --pend-bg:rgba(122,184,255,.12);
  --fail:#FF5C5C; --fail-bg:rgba(255,92,92,.12);
  /* gradients */
  --heat:linear-gradient(154deg,#000 0%,#8E1504 51.4%,#FF9900 102.8%);
  --heat-full:linear-gradient(90deg,#000 0%,#8E1504 38%,#FF9900 76%,#FFC56B 88%,#FFF1D6 100%);
  --heat-bar:linear-gradient(90deg,#8E1504,#FF9900 70%,#FFF1D6);
  --orb:radial-gradient(circle at 50% 50%,#FFF8EA 0 8%,#FFF1D6 14%,#FFC56B 26%,#FF9900 40%,#8E1504 66%,#0C0C0C 100%);
  /* type */
  --display:"loos-extrawide","Loos ExtraWide","Arial Black",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* radii */
  --r-s:6px; --r-m:14px; --r-l:28px; --r-pill:999px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* layout */
  --rail:64px; --rail-open:216px;
  --maxw:1328px; --pad:24px;
  --hdr-h:68px;
  --bnav-h:0px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--soot);color:var(--bone);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--soot);color:var(--bone);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
::selection{background:rgba(255,153,0,.35);color:var(--bone)}
html.modal-open{overflow:hidden}
[hidden]{display:none!important}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;height:40px;padding:0 16px;display:flex;align-items:center;border-radius:var(--r-pill);background:var(--bone);color:var(--soot);font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash)}
.mono b{color:var(--flare);font-weight:500}
.num,.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ash)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,240,235,.78)}
.orb{display:inline-block;border-radius:50%;background:var(--orb);box-shadow:0 0 .6em rgba(255,153,0,.35)}
.lm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.035em;display:inline-flex;align-items:center;text-transform:uppercase;text-decoration:none;color:var(--bone);line-height:1}
.ic{display:inline-flex;flex:none;line-height:0}
.m-only{display:none!important}
.stack{display:grid;gap:16px;align-content:start}
.stack-s{display:grid;gap:8px;align-content:start}
.stack-l{display:grid;gap:32px;align-content:start}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hr{height:1px;border:0;margin:0;background:var(--line)}

/* ---------- 3. SHELL: rail + app column ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .3s var(--ease)}
.shell.open{grid-template-columns:var(--rail-open) minmax(0,1fr)}
.app{position:relative;isolation:isolate;min-width:0;display:flex;flex-direction:column;padding-bottom:var(--bnav-h)}
.app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--noise),radial-gradient(60% 520px at 38% 300px,rgba(142,21,4,.26),rgba(255,153,0,.05) 50%,transparent 75%) no-repeat}
.app::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(70% 600px at 50% 0,rgba(255,241,214,.16),rgba(255,153,0,.08) 40%,transparent 75%) no-repeat}
.app.flash::after{animation:heat 1.1s var(--ease)}
@keyframes heat{18%{opacity:1}100%{opacity:0}}

/* rail */
.rail{position:sticky;top:0;z-index:35;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:4px;padding:20px 12px;border-right:1px solid var(--line);background:#0C0A0A;min-width:0}
.rail hr{border:0;height:1px;margin:8px 6px;background:var(--line);flex:none}
.rail-sp{flex:1}
.ri{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:none;display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:var(--r-pill);color:var(--ash);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s}
.ri svg{flex:none}
.ri span{overflow:hidden;text-overflow:ellipsis}
.shell:not(.open) .ri span{display:none}
.ri:hover{background:var(--char);color:var(--bone)}
.ri[aria-current]{background:var(--char);color:var(--bone)}
.ri[aria-current] svg{color:var(--flare)}
.ri[aria-current]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 999px 999px 0;background:var(--flare)}
.ri:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.shell:not(.open) .ri::after{content:attr(data-l);position:absolute;left:calc(100% + 14px);top:50%;translate:-4px -50%;height:28px;padding:0 10px;display:flex;align-items:center;border-radius:var(--r-s);background:var(--bone);color:var(--soot);font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s,translate .15s;z-index:5}
.shell:not(.open) .ri:hover::after,.shell:not(.open) .ri:focus-visible::after{opacity:1;translate:0 -50%}

/* header */
.hdr{position:sticky;top:0;z-index:30;transition:background-color .25s,box-shadow .25s}
.hdr.stuck{background:rgba(14,12,12,.66);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;gap:12px;min-height:40px;padding:14px var(--pad)}
.nav .lm{margin-right:12px}
.nav .sp{flex:1}
.nav-burger,.nav-search{display:none!important}

/* segmented pills (header tabs use it too) */
.seg{display:flex;gap:2px;background:var(--char);padding:4px;border-radius:var(--r-pill);scrollbar-width:none;overflow-x:auto;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg>button,.seg>a,.seg>label{all:unset;box-sizing:border-box;cursor:pointer;flex:none;height:32px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;border-radius:var(--r-pill);color:var(--ash);white-space:nowrap;text-decoration:none;transition:color .15s,background-color .15s}
.seg>*:hover{color:var(--bone)}
.seg>[aria-pressed="true"],.seg>[aria-selected="true"],.seg>[aria-current],.seg>.is-on,.seg>label:has(input:checked){background:var(--bone);color:var(--soot)}
.seg>*:focus-visible,.seg>label:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:-2px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg svg{opacity:.9}
.seg.block{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.seg.sm>*{height:28px;padding:0 12px;font-size:13px}
.seg.lg>*{height:40px;font-size:15px}

.search{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:40px;flex:0 1 200px;padding:0 6px 0 16px;border-radius:var(--r-pill);background:var(--char);color:var(--ash);font-size:14px;min-width:0;cursor:text;transition:box-shadow .15s}
.search:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.search:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search kbd{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--char-2);font-family:var(--mono);font-size:11px;color:var(--ash)}
.wallet{display:flex;align-items:center;gap:12px;height:40px;padding:0 4px 0 16px;border-radius:var(--r-pill);background:var(--char)}
.wallet .bal{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:var(--r-pill)}
.wallet .bal svg{color:var(--ash)}
.wallet .bal:focus-visible{outline:2px solid var(--flare);outline-offset:4px}
.wallet .dep .plus{display:none}
.avatar{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);box-shadow:inset 0 0 0 1px rgba(243,240,235,.12);font-family:var(--mono);font-size:12px;color:var(--bone);transition:box-shadow .15s}
.avatar:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.avatar:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.avatar.lg{width:56px;height:56px;font-size:15px}
.avatar.xl{width:80px;height:80px;font-size:20px}

/* category chips (casino pages, <=960) */
.chips{display:none;gap:4px;padding:4px var(--pad) 12px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 85%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);font-size:13px;font-weight:500;color:var(--ash);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.chip:hover{color:var(--bone)}
.chip[aria-current],.chip.is-on{background:var(--bone);color:var(--soot)}

/* page container */
.page{width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;padding:40px var(--pad) 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-content:start;flex:1}
.page>*{min-width:0}

/* bottom nav (<=767) */
.bnav{display:none}

/* footer */
.foot{border-top:1px solid var(--line);background:rgba(7,6,6,.6)}
.foot-in{max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;padding:48px var(--pad) 32px;display:grid;gap:40px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:16px;align-content:start}
.foot-brand .lm{font-size:22px}
.foot-brand p{color:var(--ash);font-size:14px;max-width:34ch}
.foot-col{display:grid;gap:10px;align-content:start}
.foot-col h2{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--ash);margin-bottom:4px}
.foot-col a{font-size:14px;color:var(--bone-2);text-decoration:none;width:fit-content;transition:color .15s}
.foot-col a:hover{color:var(--flare)}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;padding-top:24px;border-top:1px solid var(--line)}
.paylogo{height:36px;min-width:84px;padding:0 14px;display:inline-grid;place-items:center;border-radius:var(--r-s);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:var(--ash)}
.foot-bot .cluster{gap:12px}
.age{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-3);font-family:var(--mono);font-size:11px;font-weight:500;color:var(--bone)}

/* ---------- 4. BUTTONS ---------- */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;font-size:14px;font-weight:600;line-height:1;border-radius:var(--r-pill);white-space:nowrap;color:var(--bone);background:var(--char);text-decoration:none;transition:background-color .15s,box-shadow .15s,color .15s,opacity .15s,transform .1s}
.btn:hover{background:var(--char-2)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.btn.sm{height:32px;padding:0 16px;font-size:13px}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn.xl{height:56px;padding:0 28px;font-size:16px}
.btn.block{display:flex;width:100%}
.btn.hot{background:var(--flare);color:var(--soot)}
.btn.hot:hover{background:var(--flare-hi)}
.btn.bone{background:var(--bone);color:var(--soot)}
.btn.bone:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(243,240,235,.22)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(243,240,235,.55)}
.btn.quiet{background:transparent;color:var(--ash);padding-inline:12px}
.btn.quiet:hover{color:var(--bone);background:var(--char)}
.btn.danger{background:var(--fail-bg);color:var(--fail)}
.btn.danger:hover{background:rgba(255,92,92,.2)}
.btn.icon{width:40px;padding:0}
.btn.icon.sm{width:32px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.icon-btn{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char);color:var(--bone);transition:background-color .15s}
.icon-btn:hover{background:var(--char-2)}
.icon-btn:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.icon-btn.sm{width:32px;height:32px}
.icon-btn .dot{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 2px var(--char)}
.link{all:unset;cursor:pointer;color:var(--flare);font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,153,0,.35);text-underline-offset:3px;transition:text-decoration-color .15s}
.link:hover{text-decoration-color:var(--flare)}
.link:focus-visible{outline:2px solid var(--flare);outline-offset:2px;border-radius:2px}
.x{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--char);color:var(--ash);transition:background-color .15s,color .15s}
.x:hover{background:var(--char-2);color:var(--bone)}
.x:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* ---------- 5. FORMS ---------- */
.field{display:grid;gap:8px;align-content:start;min-width:0}
.lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:500;color:var(--bone)}
.lbl small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ash)}
.hint{font-size:12px;line-height:1.45;color:var(--ash)}
.ctl{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);color:var(--ash);transition:box-shadow .15s,background-color .15s}
.ctl:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.ctl:focus-within{box-shadow:inset 0 0 0 1.5px var(--flare),0 0 0 4px rgba(255,153,0,.12);color:var(--bone)}
.ctl input,.ctl select,.ctl textarea{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;font-size:15px;color:var(--bone)}
.ctl input::placeholder,.ctl textarea::placeholder{color:rgba(156,149,146,.75)}
.ctl .pre,.ctl .suf{flex:none;font-family:var(--mono);font-size:13px;color:var(--ash)}
.ctl .btn{margin-right:-8px}
.ctl .icon-btn{width:32px;height:32px;margin-right:-8px;background:transparent;color:var(--ash)}
.ctl .icon-btn:hover{color:var(--bone);background:var(--char-2)}
.ctl.area{height:auto;align-items:flex-start;padding:14px 16px}
.ctl.area textarea{min-height:112px;resize:vertical;line-height:1.5}
.ctl.sel{padding-right:40px}
.ctl.sel select{cursor:pointer}
.ctl.sel::after{content:"";position:absolute;right:16px;top:50%;width:10px;height:10px;translate:0 -70%;rotate:45deg;border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);pointer-events:none}
.ctl select option{background:var(--char);color:var(--bone)}
.ctl.sm{height:40px;border-radius:var(--r-pill);padding:0 14px}
.ctl.amount input{font-family:var(--mono);font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.ctl.amount{height:56px}
.ctl[aria-disabled="true"],.ctl:has(input:disabled){opacity:.55;pointer-events:none}
.ctl.ro{background:transparent}
.field.err .ctl{box-shadow:inset 0 0 0 1.5px var(--fail)}
.field.err .hint{color:var(--fail)}
.field.ok .ctl{box-shadow:inset 0 0 0 1px rgba(61,220,132,.5)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* checkbox, radio */
.check,.radio{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.45;color:var(--bone-2);user-select:none}
.check input,.radio input{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:20px;height:20px;background:var(--char);box-shadow:inset 0 0 0 1.5px var(--line-3);cursor:pointer;transition:background-color .15s,box-shadow .15s;display:grid;place-items:center}
.check input{border-radius:var(--r-s)}
.radio input{border-radius:50%}
.check input:checked{background:var(--flare) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
.radio input:checked{box-shadow:inset 0 0 0 6px var(--flare);background:var(--soot)}
.check input:focus-visible,.radio input:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.check a{color:var(--bone)}

/* switch */
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;user-select:none}
.switch input{appearance:none;-webkit-appearance:none;margin:0;flex:none;position:relative;width:44px;height:26px;border-radius:var(--r-pill);background:var(--char-2);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:background-color .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ash);transition:translate .2s var(--ease),background-color .2s}
.switch input:checked{background:var(--flare);box-shadow:none}
.switch input:checked::after{translate:18px 0;background:var(--soot)}
.switch input:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* choice cards (radio as card) */
.opts{display:grid;gap:8px}
.opts.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s,background-color .15s}
.opt:hover{background:var(--char-2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--flare);background:linear-gradient(0deg,rgba(255,153,0,.06),rgba(255,153,0,.06)),var(--char)}
.opt:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:2px}
.opt .opt-t{display:grid;gap:2px;min-width:0;flex:1}
.opt b{font-size:14px;font-weight:600}
.opt small{font-size:12px;color:var(--ash)}
.opt .opt-ic{flex:none;width:36px;height:36px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--char-2);color:var(--bone);font-family:var(--mono);font-size:10px;font-weight:500}
.opt::after{content:"";flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3);transition:box-shadow .15s}
.opt:has(input:checked)::after{box-shadow:inset 0 0 0 5px var(--flare)}
.opt.col{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.opt.col::after{position:absolute;top:12px;right:12px}

/* pick chips (amount presets, filters) */
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{all:unset;box-sizing:border-box;cursor:pointer;height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--bone);white-space:nowrap;transition:box-shadow .15s,background-color .15s,color .15s}
.pick:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.pick[aria-pressed="true"]{background:var(--bone);color:var(--soot);box-shadow:none}
.pick:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.pick.txt{font-family:var(--body);font-size:13px}

/* ---------- 6. TABS ---------- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>button,.tabs>a{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:none;height:44px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ash);white-space:nowrap;text-decoration:none;transition:color .15s}
.tabs>*:hover{color:var(--bone)}
.tabs>[aria-selected="true"],.tabs>[aria-current]{color:var(--bone)}
.tabs>[aria-selected="true"]::after,.tabs>[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--flare)}
.tabs>*:focus-visible{outline:2px solid var(--flare);outline-offset:-2px;border-radius:var(--r-s)}
.tabs .ct{height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--char);font-family:var(--mono);font-size:10px;color:var(--ash)}

/* ---------- 7. PANELS, STATS, KEY-VALUE ---------- */
.panel{position:relative;border-radius:var(--r-l);background:var(--char);padding:24px;display:grid;gap:16px;align-content:start;min-width:0}
.panel.line{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.panel.sunk{background:rgba(32,30,31,.5)}
.panel.heat{background:var(--heat);overflow:hidden;isolation:isolate}
.panel.tight{padding:16px;border-radius:var(--r-m)}
.panel-h{display:flex;align-items:center;gap:12px;min-width:0}
.panel-h h2,.panel-h h3{font-size:15px;line-height:1.2}
.panel-h p{color:var(--ash);font-size:14px}
.panel-h .sp{flex:1}
.stat{display:grid;gap:6px;align-content:start;padding:18px;border-radius:var(--r-m);background:var(--char);min-width:0}
.stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.stat .v{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--bone)}
.stat .d{font-size:12px;color:var(--ash)}
.stat.peak{background:radial-gradient(100% 140% at 100% 0%,rgba(255,241,214,.16),rgba(255,153,0,.08) 45%,var(--char) 80%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.3)}
.stat.peak .v{color:var(--core);text-shadow:0 0 14px rgba(255,197,107,.7)}
.kv{display:grid;margin:0}
.kv>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0}
.kv dt{font-size:14px;color:var(--ash)}
.kv dd{margin:0;font-size:14px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.kv dd.mono{font-size:13px;color:var(--bone)}

/* notice / callout */
.note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-m);background:var(--char);font-size:14px;line-height:1.5;color:var(--bone-2)}
.note>svg{margin-top:1px;color:var(--ash)}
.note.warn{background:rgba(66,8,4,.35);box-shadow:inset 0 0 0 1px rgba(255,153,0,.3)}
.note.warn>svg{color:var(--flare)}
.note.ok{background:var(--ok-bg)}.note.ok>svg{color:var(--ok)}
.note.fail{background:var(--fail-bg)}.note.fail>svg{color:var(--fail)}
.note.info{background:var(--pend-bg)}.note.info>svg{color:var(--pend)}

/* ---------- 8. STATUS BADGES, TAGS ---------- */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;white-space:nowrap;background:var(--char-2);color:var(--ash)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.pend{background:var(--pend-bg);color:var(--pend)}
.st.fail{background:var(--fail-bg);color:var(--fail)}
.st.pend::before{animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--char-2);font-size:12px;font-weight:500;color:var(--bone-2);white-space:nowrap}
.tag.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.tag.hot{background:var(--flare);color:var(--soot)}
.tag.line{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.amt-pos{color:var(--ok)}
.amt-neg{color:var(--ash)}
.amt-peak{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.7)}

/* ---------- 9. TABLE (cards on mobile) ---------- */
.tbl-wrap{border-radius:var(--r-l);background:var(--char);overflow:hidden}
.tbl-wrap.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{padding:14px 16px;text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background-color .15s}
.tbl tbody tr:hover{background:rgba(42,38,39,.6)}
.tbl th:first-child,.tbl td:first-child{padding-left:24px}
.tbl th:last-child,.tbl td:last-child{padding-right:24px}
.tbl .r{text-align:right}
.tbl .n{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dim{color:var(--ash)}
.tbl .t-cell{display:flex;align-items:center;gap:12px;min-width:0}
.tbl .t-cell b{font-weight:600;display:block}
.tbl .t-cell small{display:block;font-size:12px;color:var(--ash)}
.tbl .thumb{flex:none;width:40px;height:40px;border-radius:var(--r-s);display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(243,240,235,.05) 5px 6px),var(--char-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ash)}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-top:1px solid var(--line);font-size:13px;color:var(--ash)}

/* filters bar above tables */
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.filters .field{min-width:160px}
.filters .sp{flex:1}

/* ---------- 10. ACCORDION (FAQ) ---------- */
.acc-group{display:grid;align-content:start;border-radius:var(--r-l);background:var(--char);padding:0 24px}
.acc{border-top:1px solid var(--line)}
.acc:first-child{border-top:0}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;min-height:64px;padding:16px 0;font-size:16px;font-weight:500;line-height:1.35;transition:color .15s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--char-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F0EB' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:rotate .25s var(--ease),background-color .15s}
.acc[open]>summary::after{rotate:45deg;background-color:var(--flare);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")}
.acc>summary:hover{color:var(--flare)}
.acc>summary:focus-visible{outline:2px solid var(--flare);outline-offset:2px;border-radius:var(--r-s)}
.acc-b{padding:0 44px 20px 0;color:var(--bone-2);font-size:15px;line-height:1.65;display:grid;gap:10px}
.acc-b ul,.acc-b ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.acc[open] .acc-b{animation:accIn .3s var(--ease)}
@keyframes accIn{from{opacity:0;translate:0 -4px}}

/* ---------- 11. STEPPER (verification) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;counter-reset:st}
.step{position:relative;display:grid;gap:10px;align-content:start;padding-top:0;counter-increment:st}
.step .dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soot);box-shadow:inset 0 0 0 1.5px var(--line-3);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ash)}
.step .dot::before{content:counter(st)}
.step::before{content:"";position:absolute;top:16px;left:40px;right:0;height:1.5px;background:var(--line-2)}
.step:last-child::before{display:none}
.step b{display:block;font-size:14px;font-weight:600}
.step small{display:block;font-size:12px;color:var(--ash)}
.step.done .dot{background:var(--bone);box-shadow:none;color:var(--soot)}
.step.done .dot::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.step.done::before{background:var(--bone)}
.step.cur .dot{box-shadow:inset 0 0 0 2px var(--flare),0 0 0 5px rgba(255,153,0,.14);color:var(--flare)}
.step.fail .dot{box-shadow:inset 0 0 0 2px var(--fail);color:var(--fail)}

/* ---------- 12. DROPZONE ---------- */
.drop{position:relative;display:grid;justify-items:center;gap:8px;padding:32px 20px;border-radius:var(--r-m);border:1.5px dashed var(--line-3);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(243,240,235,.025) 14px 15px),rgba(32,30,31,.4);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.drop:hover,.drop.over{border-color:var(--flare);background-color:rgba(255,153,0,.05)}
.drop:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:2px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .drop-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.drop b{font-size:15px;font-weight:600}
.drop b u{color:var(--flare);text-decoration:none}
.drop small{font-size:12px;color:var(--ash)}
.file{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:var(--r-m);background:var(--char)}
.file .fi{flex:none;width:36px;height:36px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--char-2);font-family:var(--mono);font-size:10px;color:var(--ash)}
.file .ft{flex:1;min-width:0;display:grid}
.file .ft b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .ft small{font-family:var(--mono);font-size:11px;color:var(--ash)}

/* ---------- 13. EMPTY STATE ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:48px 24px}
.empty .e-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;background:radial-gradient(circle at 50% 30%,var(--char-2),var(--char));box-shadow:inset 0 0 0 1px var(--line);color:var(--ash)}
.empty h3{font-size:16px}
.empty p{max-width:40ch;color:var(--ash);font-size:14px}
.empty .btn{margin-top:8px}

/* ---------- 14. PAGINATION ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.pager a,.pager button,.pager span{all:unset;box-sizing:border-box;min-width:36px;height:36px;padding:0 8px;display:grid;place-items:center;border-radius:var(--r-pill);font-family:var(--mono);font-size:13px;color:var(--ash);cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s}
.pager a:hover,.pager button:hover{background:var(--char);color:var(--bone)}
.pager [aria-current]{background:var(--bone);color:var(--soot)}
.pager span{cursor:default}
.pager .pg-arr{background:var(--char);color:var(--bone)}
.pager [aria-disabled="true"]{opacity:.35;pointer-events:none}
.pager a:focus-visible,.pager button:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* ---------- 15. BREADCRUMBS + PAGE HEADER ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs a{text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--bone)}
.crumbs [aria-current]{color:var(--bone)}
.ph{display:grid;gap:14px;align-content:start}
.ph h1{font-size:var(--h1,32px);line-height:1.05}
.ph .lead{max-width:62ch;color:var(--ash);font-size:clamp(15px,1.3vw,17px)}
.ph-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.ph-actions{display:flex;flex-wrap:wrap;gap:8px}
.ph.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4vw,48px);border-radius:var(--r-l);background:var(--char)}
.ph.hero::before{content:"";position:absolute;right:-10%;top:-60%;width:60%;aspect-ratio:1;z-index:-1;background:radial-gradient(closest-side,rgba(255,153,0,.28),rgba(142,21,4,.18) 55%,transparent)}

/* ---------- 16. LONG DOCS: TOC + PROSE ---------- */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:2px;max-height:calc(100vh - var(--hdr-h) - 32px);overflow:auto;scrollbar-width:thin;padding-right:4px}
.toc .toc-t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:10px}
.toc a{position:relative;display:block;padding:7px 12px 7px 14px;border-radius:var(--r-s);font-size:13px;line-height:1.35;color:var(--ash);text-decoration:none;transition:color .15s,background-color .15s}
.toc a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--line)}
.toc a:hover{color:var(--bone);background:rgba(32,30,31,.6)}
.toc a[aria-current]{color:var(--bone)}
.toc a[aria-current]::before{background:var(--flare)}
.prose{max-width:72ch;color:var(--bone-2);font-size:16px;line-height:1.7}
.prose>*+*{margin-top:16px}
.prose h2{font-size:20px;line-height:1.2;color:var(--bone);margin-top:48px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);font-size:17px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--bone);margin-top:28px}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:8px}
.prose li::marker{color:var(--ash)}
.prose a{color:var(--flare);text-underline-offset:3px;text-decoration-color:rgba(255,153,0,.4)}
.prose strong,.prose b{color:var(--bone);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:14px;border-radius:var(--r-m);overflow:hidden;background:var(--char)}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.prose tr:last-child td{border-bottom:0}
.prose .meta{font-family:var(--mono);font-size:12px;color:var(--ash)}

/* ---------- 17. PROGRESS + VIP LEVELS ---------- */
.prog{position:relative;height:8px;border-radius:var(--r-pill);background:var(--char-2);overflow:hidden}
.prog>i{position:absolute;inset:0 auto 0 0;width:var(--v,0%);border-radius:inherit;background:linear-gradient(90deg,#8E1504,#FF9900);transition:width .8s var(--ease)}
.prog.peak>i{background:var(--heat-bar);box-shadow:0 0 12px rgba(255,153,0,.5)}
.prog.sm{height:4px}
.prog-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--ash)}
.prog-meta b{color:var(--bone);font-weight:500}
.levels{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;position:relative}
.levels li{position:relative;display:grid;gap:6px;justify-items:start;padding-top:28px}
.levels li::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:var(--line-2)}
.levels li::after{content:"";position:absolute;top:2px;left:0;width:14px;height:14px;border-radius:50%;background:var(--soot);box-shadow:inset 0 0 0 2px var(--line-3)}
.levels li.done::before{background:var(--flare)}
.levels li.done::after{background:var(--flare);box-shadow:none}
.levels li.cur::after{background:var(--core);box-shadow:0 0 0 5px rgba(255,241,214,.14),0 0 16px rgba(255,197,107,.8)}
.levels b{font-family:var(--display);font-size:13px;text-transform:uppercase}
.levels small{font-family:var(--mono);font-size:11px;color:var(--ash)}

/* ---------- 18. DIALOGS: modal, popover, sheet, drawer ---------- */
dialog.dlg{padding:0;border:0;margin:auto;color:var(--bone);background:var(--dlg);border-radius:var(--r-l);width:min(480px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 120px -20px rgba(0,0,0,.85),0 30px 90px -50px rgba(142,21,4,.7)}
dialog.dlg[open]{display:flex;flex-direction:column;animation:dlgIn .28s var(--ease)}
dialog.dlg.closing{animation:dlgOut .16s ease-in forwards}
dialog.dlg::backdrop{background:rgba(8,6,6,.64);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.dlg[open]::backdrop{animation:fadeIn .25s ease}
dialog.dlg.closing::backdrop{animation:fadeOut .16s ease-in forwards}
@keyframes dlgIn{from{opacity:0;translate:0 12px;scale:.98}}
@keyframes dlgOut{to{opacity:0;translate:0 8px;scale:.985}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.dlg-in{display:flex;flex-direction:column;min-height:0;flex:1;max-height:inherit}
.dlg-h{flex:none;display:flex;align-items:center;gap:12px;padding:20px 20px 0 24px}
.dlg-h h2{font-size:18px;line-height:1.15;flex:1;min-width:0}
.dlg-h p{color:var(--ash);font-size:14px;margin-top:6px;text-transform:none}
.dlg-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 24px;display:grid;gap:16px;align-content:start;scrollbar-width:thin}
.dlg-f{flex:none;display:grid;gap:12px;padding:16px 24px 24px;border-top:1px solid var(--line)}
.dlg.wide{width:min(640px,calc(100vw - 32px))}
.dlg.xwide{width:min(880px,calc(100vw - 32px))}
/* popover (desktop anchored under trigger) */
dialog.dlg.pop{width:360px;border-radius:var(--r-l)}
dialog.dlg.pop::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
dialog.dlg.pop[open]{animation:popIn .2s var(--ease)}
@keyframes popIn{from{opacity:0;translate:0 -6px}}
.pop .dlg-h{padding:16px 16px 0 20px}
.pop .dlg-h h2{font-size:14px}
.pop .dlg-b{padding:14px 12px 12px}
.pop.menu{width:280px}
/* search: top-anchored */
dialog.dlg.search-dlg{margin-top:64px;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 96px)}
/* drawer (tablet menu) */
dialog.dlg.drawer{margin:0 auto 0 0;height:100dvh;max-height:100dvh;width:min(380px,100vw);border-radius:0 var(--r-l) var(--r-l) 0}
dialog.dlg.drawer[open]{animation:drawerIn .3s var(--ease)}
@keyframes drawerIn{from{translate:-40px 0;opacity:0}}
.grab{display:none}

/* menu list inside popovers and sheets */
.mlist{display:grid;gap:2px}
.mlist a,.mlist button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-m);font-size:14px;font-weight:500;color:var(--bone);text-decoration:none;transition:background-color .15s}
.mlist a:hover,.mlist button:hover{background:var(--char)}
.mlist a:focus-visible,.mlist button:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.mlist svg{color:var(--ash)}
.mlist .end{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--ash)}
.mlist [aria-current] svg,.mlist [aria-checked="true"] svg{color:var(--flare)}
.mlist [aria-current]{background:var(--char)}
.mlist .danger{color:var(--fail)}
.mlist .danger svg{color:var(--fail)}
.mlist hr{border:0;height:1px;background:var(--line);margin:6px 8px}
.mlist .radio-row[aria-checked="true"]::after{content:"";margin-left:auto;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 5px var(--flare)}
.mlist .radio-row[aria-checked="false"]::after{content:"";margin-left:auto;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.mgroup{display:grid;gap:4px}
.mgroup>h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--ash);padding:8px 12px 2px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiles a,.tiles button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;border-radius:var(--r-m);background:var(--char);font-size:12px;font-weight:500;text-align:center;color:var(--bone);text-decoration:none;transition:background-color .15s}
.tiles a:hover,.tiles button:hover{background:var(--char-2)}
.tiles a[aria-current] svg{color:var(--flare)}
.tiles a:focus-visible,.tiles button:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* user card in profile menu */
.ucard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:8px 8px 14px}
.ucard>div>b{display:block;font-size:15px;font-weight:600}
.ucard>div>small{display:block;font-family:var(--mono);font-size:11px;color:var(--ash)}
.ucard .prog{grid-column:1/-1}

/* notifications */
.ntf{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px;border-radius:var(--r-m);transition:background-color .15s}
.ntf:hover{background:var(--char)}
.ntf .n-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.ntf.unread .n-ic{box-shadow:inset 0 0 0 1.5px var(--flare);color:var(--flare)}
.ntf b{display:block;font-size:14px;font-weight:600}
.ntf p{font-size:13px;color:var(--bone-2);line-height:1.45;margin-top:2px}
.ntf time{display:block;font-family:var(--mono);font-size:11px;color:var(--ash);margin-top:6px}
.ntf .x{width:28px;height:28px;background:transparent}

/* wallet dialog bits */
.addr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:var(--r-m);background:var(--char)}
.qr{width:104px;height:104px;border-radius:var(--r-s);background:var(--bone);padding:8px;display:grid}
.qr svg{width:100%;height:100%}
.addr code{display:block;font-family:var(--mono);font-size:13px;line-height:1.5;word-break:break-all;color:var(--bone)}
.sum{display:grid;gap:6px;font-size:13px;color:var(--ash)}
.sum>div{display:flex;justify-content:space-between;gap:12px}
.sum b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.divider{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ash)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.terms{font-size:12px;line-height:1.5;color:var(--ash);text-align:center}
.terms a{color:var(--bone)}

/* ---------- 19. TOAST ---------- */
.toasts{position:fixed;inset:auto 24px 24px auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;z-index:100;display:grid;gap:8px;justify-items:end;pointer-events:none;width:auto;height:auto;max-width:calc(100vw - 32px)}
.toasts:popover-open{display:grid}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:48px;max-width:420px;padding:10px 10px 10px 16px;border-radius:var(--r-m);background:#1b1819;box-shadow:0 0 0 1px var(--line-2),0 20px 50px -12px rgba(0,0,0,.8);font-size:14px;color:var(--bone);animation:toastIn .3s var(--ease)}
.toast>svg{color:var(--ash)}
.toast.ok>svg{color:var(--ok)}
.toast.fail>svg{color:var(--fail)}
.toast.pend>svg{color:var(--pend)}
.toast.peak{background:radial-gradient(120% 200% at 0% 50%,rgba(255,241,214,.2),rgba(255,153,0,.1) 45%,#1b1819 80%);box-shadow:0 0 0 1px rgba(255,241,214,.35),0 20px 50px -12px rgba(0,0,0,.8)}
.toast.peak>svg{color:var(--core)}
.toast .x{width:28px;height:28px;background:transparent;margin-left:4px}
.toast.out{animation:toastOut .2s ease-in forwards}
@keyframes toastIn{from{opacity:0;translate:0 10px}}
@keyframes toastOut{to{opacity:0;translate:0 6px}}

/* ---------- 20. LOBBY + GAME BLOCKS ---------- */
/* wins ticker */
.wins-row{display:flex;align-items:center;gap:16px;min-width:0}
.wins-lbl{flex:none;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.wins-lbl i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(61,220,132,.16)}
.wins{flex:1;min-width:0;display:flex;gap:8px;overflow:hidden;mask-image:linear-gradient(90deg,#000 82%,transparent)}
.win{flex:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 4px;border-radius:var(--r-pill);background:var(--char);font-size:13px;white-space:nowrap;text-decoration:none;color:inherit;cursor:pointer;transition:background-color .2s}
.win:hover{background:var(--char-2)}
.win .th{flex:none;width:28px;height:28px;border-radius:var(--r-s);background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(243,240,235,.05) 5px 6px),var(--char-2);box-shadow:inset 0 0 0 1px var(--line)}
/* ticker thumbnails: the game's cover (focus on the upper part), or a branded mini placeholder with outlined initials */
.win .th{position:relative;overflow:hidden}
.win .th img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.win .th-ph{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 115%,rgba(255,153,0,.38),rgba(229,72,0,.14) 50%,transparent 78%),linear-gradient(180deg,#1a1718,#141213)}
.win .th-ph::before{content:attr(data-in);font-family:var(--display);font-weight:700;font-size:11px;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(243,240,235,.55)}
.win .g{color:var(--bone)}
.win .id{font-family:var(--mono);font-size:11px;color:var(--ash);opacity:.75}
.win b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums}
.win.peak{background:radial-gradient(120% 200% at 0% 50%,rgba(255,241,214,.22),rgba(255,153,0,.12) 45%,var(--char) 80%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.35)}
.win.peak .id{opacity:.9}
.win.peak b{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.8)}

/* promo bento (desktop) -> carousel (mobile) */
.promo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,154px);gap:12px}  /* was 2 × 216 (444); 2 × 154 = 320 fits the Top 10 row above the fold at 1440 × 900 */
.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-l);background:var(--char);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:24px;color:inherit;text-decoration:none}
.tile img{position:absolute;z-index:-2;object-fit:cover;transition:transform .7s var(--ease)}
.tile h2,.tile h3{margin:0}
.t-main{grid-column:span 8;grid-row:span 2;background:var(--heat);padding:40px;gap:12px}
.t-main img{right:-2%;top:-4%;height:108%;width:auto;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent 0,#000 30%);transform:translate(var(--px,0px),var(--py,0px)) scale(var(--ps,1));transition:transform .6s var(--ease)}
.t-main:hover{--ps:1.03}
.t-main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(255,197,107,.22),transparent 60%)}
.t-main:hover::after{opacity:1}
.t-main .t-h{font-size:clamp(34px,4.6vw,64px);line-height:.92}
.t-main p{max-width:30ch;color:rgba(243,240,235,.85);font-size:15px;line-height:1.5}
.t-main .cta{display:flex;gap:8px;margin-top:12px}
.t-main .deco{position:absolute;right:40px;bottom:54px;display:flex;gap:6px}
.deco i{width:16px;height:3px;border-radius:var(--r-pill);background:rgba(243,240,235,.28)}
.deco i.is-on{width:32px;background:var(--bone)}
.t-side{grid-column:span 4;padding:24px 72px 24px 24px}
.t-side img{inset:0;width:100%;height:100%;object-position:70% 42%}
.t-side::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(12,12,12,0) 30%,rgba(12,12,12,.62) 60%,rgba(12,12,12,.94) 100%)}
.t-side .t-h{font-size:20px;line-height:1.05}
.t-side .sub-l{font-family:var(--mono);font-size:11px;color:rgba(243,240,235,.72)}
.t-side .go{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(243,240,235,.14);backdrop-filter:blur(10px);color:var(--bone);transition:background-color .2s,color .2s}
.t-side:hover img{transform:scale(1.04)}
.t-side:hover .go,.t-side:focus-visible .go{background:var(--flare);color:var(--soot)}
.t-side:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.tile .m-cta{display:none}
.car-dots{display:none}

/* carousel progress segments (any [data-carousel]) */
.car-dots{justify-content:center;align-items:center;gap:4px;padding-top:2px}
.car-dots button{all:unset;box-sizing:border-box;position:relative;cursor:pointer;width:12px;height:14px;transition:width .3s var(--ease)}
.car-dots button::before,.car-dots button::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:var(--r-pill)}
.car-dots button::before{background:rgba(243,240,235,.18)}
.car-dots button::after{background:rgba(243,240,235,.85);transform:scaleX(0);transform-origin:left center}
.car-dots button.is-on{width:24px}
.car-dots button.is-on::after{animation:mfill var(--car-t,5s) linear forwards}
.hold .car-dots button.is-on::after{animation-play-state:paused}
.car-dots button:focus-visible::before{outline:2px solid var(--flare);outline-offset:3px}
@keyframes mfill{to{transform:scaleX(1)}}
.carousel.static .car-dots button.is-on::after{animation:none;transform:scaleX(1)}

/* row = section of games */
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.row-h{display:flex;align-items:center;gap:8px;min-height:32px;min-width:0}
.row-h .ttl{display:inline-flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;min-width:0}
.row-h .ttl h2,.row-h .ttl h3{font-size:17px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-h .ttl>svg:last-child{color:var(--ash);transition:translate .2s,color .2s}
.row-h .ttl:hover>svg:last-child{translate:3px 0;color:var(--bone)}
.row-h .ttl:focus-visible{outline:2px solid var(--flare);outline-offset:4px;border-radius:var(--r-s)}
.row-h .ct{margin-left:4px;height:22px;padding:0 8px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--char);font-family:var(--mono);font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums;flex:none}
.row-h .subt{margin-left:8px;font-size:13px;color:var(--ash);white-space:nowrap}
.row-h .sp{flex:1}
.row-h .all{flex:none;height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:2px;border-radius:var(--r-pill);font-size:13px;font-weight:500;color:var(--ash);text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line);transition:color .15s,box-shadow .15s}
.row-h .all svg{display:none}
.row-h .all:hover{color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-3)}
.arr{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--char);color:var(--bone);transition:background-color .15s,opacity .15s}
.arr:hover{background:var(--char-2)}
.arr[disabled]{opacity:.35;cursor:default;background:var(--char)}
.arr:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* game cover placeholder */
.gc{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;aspect-ratio:3/4;border-radius:var(--r-m);overflow:hidden;padding:12px;text-align:left;
  background:linear-gradient(115deg,transparent 42%,rgba(243,240,235,.07) 50%,transparent 58%) 130% 0/260% 100% no-repeat,repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.028) 11px 12px),linear-gradient(180deg,#1c191a,#262223);
  box-shadow:inset 0 0 0 1px rgba(243,240,235,.08);transition:box-shadow .2s,transform .25s var(--ease),background-position .9s var(--ease)}
.gc::before{content:"";position:absolute;left:50%;top:40%;width:24px;height:24px;translate:-50% -50%;z-index:-1;background:rgba(243,240,235,.16);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E") center/contain no-repeat;transition:opacity .2s}
.gc::after{content:"";position:absolute;left:50%;top:40%;width:48px;height:48px;translate:-50% -50%;scale:.8;opacity:0;border-radius:50%;background:var(--flare) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.8v12.4c0 .8.9 1.3 1.6.8l9.3-6.2c.6-.4.6-1.2 0-1.6L10.1 5c-.7-.5-1.6 0-1.6.8z' fill='%230C0C0C'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 8px 24px -6px rgba(255,153,0,.6);transition:opacity .2s,scale .25s var(--ease)}
.gc .cv-t{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.15vw,17px);line-height:1.05;text-wrap:balance;text-transform:uppercase;color:var(--bone);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gc .cv-p{display:block;max-width:100%;margin-top:4px;font-size:12px;font-weight:500;line-height:1.3;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .badge{position:absolute;top:10px;left:10px;height:18px;padding:0 7px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--bone);color:var(--soot);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.gc .badge.hot{background:var(--flare)}
.gc .pill{position:absolute;top:8px;left:8px;height:22px;padding:0 9px;display:flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:rgba(12,12,12,.72);font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.gc .pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:onair 1.6s ease-out infinite}
@keyframes onair{0%{box-shadow:0 0 0 0 rgba(61,220,132,.45)}100%{box-shadow:0 0 0 4px rgba(61,220,132,0)}}
.gc.wide{aspect-ratio:16/10}
.gc.wide::before,.gc.wide::after{top:44%}
.gc.sq{flex:none;width:56px;aspect-ratio:1;padding:0;border-radius:var(--r-s)}
.gc.sq::before{top:50%;width:18px;height:18px}
.gc.sq::after{display:none}
.gcard{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;color:inherit;text-decoration:none;outline:none}
.gcard .gc{width:100%}
.gcard:hover .gc,.gcard:focus-visible .gc{box-shadow:inset 0 0 0 1.5px var(--flare);transform:translateY(-4px);background-position:-30% 0,0 0,0 0}
.gcard:hover .gc::before,.gcard:focus-visible .gc::before{opacity:0}
.gcard:hover .gc::after,.gcard:focus-visible .gc::after{opacity:1;scale:1}
.players{display:flex;align-items:center;gap:6px;height:16px;font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.players>i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.players .lim{margin-left:auto;font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis}

/* generic game grid for category/search pages */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* Top 10 */
.top10{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;scrollbar-width:none}
.top10::-webkit-scrollbar{display:none}
.t10{position:relative;min-width:0;padding-left:clamp(44px,4.6vw,64px)}
.t10 .num{position:absolute;left:-4px;bottom:24px;z-index:0;font-family:var(--display);font-weight:700;font-size:clamp(120px,12.4vw,176px);line-height:.74;letter-spacing:-.06em;color:var(--soot-2);-webkit-text-stroke:1.5px rgba(243,240,235,.3);transition:-webkit-text-stroke-color .2s;pointer-events:none}
.t10 .gcard{position:relative;z-index:1}
.t10:hover .num{-webkit-text-stroke-color:var(--flare)}

/* slots grid */
.slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}

/* crash cards */
.crash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cr{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 20px 12px 12px;border-radius:var(--r-m);background:var(--char);color:inherit;text-decoration:none;transition:box-shadow .3s,background .6s}
.cr:hover,.cr:focus-visible{box-shadow:inset 0 0 0 1.5px var(--flare);outline:none}
.cr-i{display:grid;gap:2px;min-width:0}
.cr-i b{font-family:var(--display);font-size:15px;font-weight:700;line-height:1.1;text-transform:uppercase}
.cr-i small{font-size:12px;color:var(--ash)}
.cr-i .players{margin-top:6px}
.cr .x-v{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--bone);text-align:right;align-self:start;margin-top:6px;transition:color .3s,text-shadow .3s}
.cr .curve{position:absolute;right:0;bottom:0;width:52%;height:18%;z-index:-1;color:rgba(243,240,235,.22);transition:height .5s var(--ease),color .4s}
.cr[data-st="warm"] .x-v{color:var(--flare)}
.cr[data-st="warm"] .curve{height:32%;color:rgba(255,153,0,.55)}
.cr[data-st="peak"]{background:radial-gradient(90% 140% at 100% 0%,rgba(255,241,214,.18),rgba(255,153,0,.10) 40%,var(--char) 75%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.32)}
.cr[data-st="peak"] .x-v{color:var(--core);text-shadow:0 0 16px rgba(255,197,107,.9)}
.cr[data-st="peak"] .curve{height:46%;color:rgba(255,241,214,.7)}
.cr[data-st="bust"] .x-v{font-size:13px;color:var(--ash);text-transform:uppercase;letter-spacing:.04em}
.cr[data-st="bust"] .curve{height:10%}

/* live tables */
.live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;scrollbar-width:none}
.live::-webkit-scrollbar{display:none}

/* providers */
.prov{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 6);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.prov::-webkit-scrollbar{display:none}
.pv{scroll-snap-align:start;aspect-ratio:2/1;min-width:0;border-radius:var(--r-m);display:grid;place-items:center;padding:0 16px;background:var(--char);color:var(--ash);text-decoration:none;text-align:center;white-space:nowrap;transition:color .2s,box-shadow .2s,background-color .2s}
.pv:hover,.pv:focus-visible{color:var(--bone);background:var(--char-2);box-shadow:inset 0 0 0 1px var(--flare);outline:none}
.wm-a{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.wm-b{font-family:var(--body);font-weight:600;font-size:17px;letter-spacing:-.03em;line-height:1}
.wm-c{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.wm-d{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.wm-e{font-family:var(--body);font-weight:500;font-size:16px;font-style:italic;letter-spacing:-.02em;line-height:1}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1180px){
  .slots{grid-template-columns:repeat(5,minmax(0,1fr))}
  .slots>:nth-child(n+6){display:none}
  .foot-top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1100px){
  .nav .search{display:none}
  .nav-search{display:grid!important}
  .seg.nav-tabs svg{display:none}
}
@media (max-width:960px){
  :root{--pad:20px}
  .shell,.shell.open{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .nav{padding-block:12px}
  .nav-burger{display:grid!important}
  .nav .nav-tabs{display:none}
  .nav .lm{margin-right:0}
  .chips{display:flex}
  .page{padding-top:24px;gap:32px}
  .t-main img{height:80%;top:-4%;right:-8%}
  .t-main::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,12,12,.6),rgba(12,12,12,0) 60%)}
  .promo{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .t-main,.t-side{grid-column:1/-1;grid-row:auto}
  .t-main{min-height:340px;padding:28px}
  .t-main .deco{right:28px;bottom:40px}
  .t-side{min-height:200px}
  .lane,.top10,.live{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .top10{grid-auto-columns:200px}
  .live{grid-auto-columns:260px}
  .top10>*,.live>*{scroll-snap-align:start}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slots>:nth-child(n+6){display:grid}
  .slots>:nth-child(n+7){display:none}
  .crash{grid-template-columns:minmax(0,1fr)}
  .prov{grid-auto-columns:150px}
  .row-h .arr,.row-h .subt{display:none}
  .doc{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding:0 0 4px;scrollbar-width:none}
  .toc .toc-t{display:none}
  .toc a{flex:none;padding:0 14px;height:32px;display:flex;align-items:center;border-radius:var(--r-pill);background:var(--char);white-space:nowrap}
  .toc a::before{display:none}
  .toc a[aria-current]{background:var(--bone);color:var(--soot)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ----- MOBILE ≤767: one-axis header, bottom nav, sheets ----- */
@media (max-width:767px){
  :root{--pad:16px;--hdr-h:100px;--bnav-h:calc(64px + env(safe-area-inset-bottom,0px))}
  .d-only{display:none!important}
  .m-only{display:revert!important}
  body{font-size:15px}
  /* header */
  .hdr{background:rgba(14,12,12,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
  .hdr.stuck{box-shadow:0 1px 0 var(--line)}
  .nav{height:52px;min-height:52px;padding:0 16px;gap:8px}
  .nav .lm{font-size:17px;margin-right:auto}
  .nav-burger,.nav-bell,.nav .avatar{display:none!important}
  .nav-search{width:36px;height:36px}
  .wallet{height:36px;gap:8px;padding:0 3px 0 12px}
  .wallet .bal{font-size:13px}
  .wallet .bal>svg{display:none}
  .wallet .dep{width:30px;height:30px;padding:0;border-radius:50%}
  .wallet .dep .lbl-t{display:none}
  .wallet .dep .plus{display:block}
  .chips{padding:4px 16px 12px}
  /* page */
  .page{padding:12px 16px 32px;gap:24px}
  .page.lobby{gap:16px}
  .app{padding-bottom:var(--bnav-h)}
  /* bottom nav */
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:8px 8px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--soot-2)}
  .bnav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:32px;background:linear-gradient(rgba(14,12,12,0),var(--soot-2));pointer-events:none}
  .bnav a,.bnav button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:500;color:var(--ash);text-decoration:none;border-radius:var(--r-m);-webkit-tap-highlight-color:transparent}
  .bnav [aria-current],.bnav [aria-expanded="true"]{color:var(--bone)}
  .bnav [aria-current] svg,.bnav [aria-expanded="true"] svg{color:var(--flare)}
  .bnav a:focus-visible,.bnav button:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
  /* footer */
  .foot-in{padding:32px 16px 24px;gap:28px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .foot-bot{flex-direction:column;align-items:flex-start}
  /* layout helpers */
  .grid-2,.grid-3,.form-row{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:18px;border-radius:22px}
  .acc-group{padding:0 18px;border-radius:22px}
  .acc>summary{font-size:15px;min-height:56px}
  .acc-b{padding-right:0;font-size:14px}
  .tbl-wrap{border-radius:22px}
  .ph h1{font-size:var(--h1,24px)}
  .steps{grid-auto-flow:row;gap:0}
  .step{grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding-bottom:20px}
  .step .dot{grid-row:span 2}
  .step::before{top:36px;bottom:0;left:15px;right:auto;width:1.5px;height:auto}
  .levels{grid-auto-flow:row;gap:18px}
  .levels li{padding:0 0 0 28px}
  .levels li::before{top:16px;bottom:-18px;left:7px;right:auto;width:2px;height:auto}
  .levels li:last-child::before{display:none}
  .levels li::after{top:2px}
  /* table -> cards */
  .tbl.cards thead{display:none}
  .tbl.cards,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 18px;border-bottom:1px solid var(--line)}
  .tbl.cards tr:last-child{border-bottom:0}
  .tbl.cards td{padding:0!important;border:0;display:flex;justify-content:space-between;gap:12px;grid-column:1/-1;font-size:13px}
  .tbl.cards td[data-label]::before{content:attr(data-label);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);align-self:center}
  .tbl.cards td.c-title{grid-column:1;display:block}
  .tbl.cards td.c-end{grid-column:2;grid-row:1;justify-content:flex-end;text-align:right}
  .tbl.cards td.c-end::before{display:none}
  .tbl-foot{padding:12px 18px;flex-direction:column;align-items:stretch}
  /* dialogs become bottom sheets */
  dialog.dlg,dialog.dlg.pop,dialog.dlg.search-dlg,dialog.dlg.drawer,dialog.dlg.wide,dialog.dlg.xwide{width:100%;max-width:100%;margin:auto 0 0;height:fit-content;max-height:calc(100dvh - max(24px,env(safe-area-inset-top,0px) + 12px));border-radius:var(--r-l) var(--r-l) 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  /* sheets hug their content (height:auto stretched a modal <dialog> to its max-height); .dlg-b scrolls inside.
     The wallet keeps its fixed tall sheet so it does not jump between Deposit and Withdraw. */
  dialog.dlg.wide.wl{height:92dvh;max-height:92dvh}
  dialog.dlg[open],dialog.dlg.pop[open],dialog.dlg.drawer[open]{animation:sheetIn .34s var(--ease)}
  dialog.dlg.closing{animation:sheetOut .2s ease-in forwards}
  dialog.dlg.pop::backdrop{background:rgba(8,6,6,.64);backdrop-filter:blur(4px)}
  @keyframes sheetIn{from{translate:0 100%}}
  @keyframes sheetOut{to{translate:0 100%}}
  .grab{display:block;flex:none;width:100%;height:22px;position:relative;cursor:grab;touch-action:none}
  .grab::before{content:"";position:absolute;left:50%;top:8px;translate:-50% 0;width:40px;height:4px;border-radius:var(--r-pill);background:var(--line-3)}
  .dlg-h{padding:4px 16px 0 20px}
  .dlg-b{padding:16px 20px 20px}
  .dlg-f{padding:14px 20px 20px}
  .pop .dlg-h{padding:4px 16px 0 20px}
  .pop .dlg-b{padding:12px 12px 16px}
  .pop .dlg-h h2{font-size:16px}
  .toasts{inset:auto 16px calc(var(--bnav-h) + 12px) 16px;justify-items:center;max-width:none}
  .toast{max-width:100%}

  /* ---- lobby on mobile: matches plazmo-lobby .lp-mob ---- */
  .lobby .wins-row{order:3;margin-inline:0 -16px}
  .lobby .promo-car{order:1}
  .lobby .row-top{order:2}
  .lobby>.row:not(.row-top){order:4}
  .wins-lbl{display:none}
  .wins{gap:6px}
  .win{height:32px;font-size:12px;padding:0 12px 0 4px}
  .win .th{width:24px;height:24px}
  .win .id{display:none}
  /* promo carousel */
  .promo{display:flex;gap:8px;margin-inline:-16px;padding:0 16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
  .promo::-webkit-scrollbar{display:none}
  .promo .tile{flex:none;width:calc(100% - 48px);min-height:0;height:148px;padding:16px 18px;gap:6px;scroll-snap-align:start;scroll-snap-stop:always}
  .promo .t-main::before{display:none}
  .promo .t-main img{right:-64px;top:-10%;height:130%;mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
  .promo .t-main .t-h{font-size:24px;line-height:.92}
  .promo .t-main p,.promo .t-main .cta,.promo .deco,.promo .sub-l,.promo .go{display:none}
  .promo .t-side img{object-position:70% 40%}
  .promo .t-side::before{background:linear-gradient(200deg,rgba(12,12,12,0) 30%,rgba(12,12,12,.6) 60%,rgba(12,12,12,.94))}
  .promo .t-side .t-h{font-size:17px}
  .promo .eyebrow{font-size:10px}
  .promo .tile .m-cta{display:inline-flex;margin-top:4px}
  .car-dots{display:flex}
  .promo-car{display:grid;gap:8px}
  /* row headers */
  .row{gap:8px}
  .row-h{min-height:20px;height:20px;gap:6px}
  .row-h .ttl{gap:6px}
  .row-h .ttl>svg:first-child{width:16px;height:16px}
  .row-h .ttl>svg:last-child{display:none}
  .row-h .ttl h2,.row-h .ttl h3{font-size:13px}
  .row-h .ct{margin-left:0;height:18px;padding:0 6px;font-size:10px}
  .row-h .all{height:auto;padding:0;box-shadow:none;font-size:12px}
  .row-h .all svg{display:block}
  .row-h .all:hover{box-shadow:none}
  /* lanes bleed to the edge */
  .lane,.top10,.live,.prov{display:flex;gap:8px;margin-inline:-16px;padding-inline:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .lane .gc,.top10 .gc{padding:8px}
  .lane .gc .cv-t,.top10 .gc .cv-t{font-size:14px}
  .gc .cv-p{font-size:10px;margin-top:2px}
  .lane .gc .badge,.top10 .gc .badge,.slots .gc .badge{top:8px;left:8px;height:16px;padding:0 6px;font-size:8px}
  .lane .players,.top10 .players,.live .players{font-size:11px}
  .t10{flex:none;padding-left:24px}
  .t10 .num{left:-2px;bottom:22px;font-size:96px;-webkit-text-stroke-width:1.2px}
  .t10 .gcard{width:94px}
  .crash{gap:8px}
  .crash>:nth-child(n+3){display:none}
  .cr{gap:12px;padding:10px 16px 10px 10px}
  .cr .gc.sq{width:48px}
  .cr-i b{font-size:13px}
  .cr .x-v{font-size:20px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .slots>:nth-child(n+6){display:grid}
  .slots>:nth-child(n+7){display:none}
  .slots .gc{padding:12px}
  .slots .gc .cv-t{font-size:16px}
  .slots .gc .cv-p{font-size:11px}
  .live{gap:10px}
  .live>.gcard{flex:none;width:208px}
  .live .players .lim{display:none}
  .prov .pv{flex:none;width:124px;padding:0 10px}
  .prov .wm-a{font-size:11px}.prov .wm-b{font-size:14px}.prov .wm-c{font-size:11px}.prov .wm-d{font-size:10px}.prov .wm-e{font-size:13px}
  .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (min-width:768px){.bnav{display:none!important}}
@media (max-width:380px){.wallet .bal{font-size:12px}.nav .lm{font-size:15px}}

/* ---------- 22. MOTION: reveal, still, reduced ---------- */
.rv-pre>.row-h,.rv-pre .gcard,.rv-pre .cr,.rv-pre .pv,.rv-pre>.rv-i{opacity:0;translate:0 12px}
.rv>.row-h,.rv .gcard,.rv .cr,.rv .pv,.rv>.rv-i{transition:opacity .5s ease,translate .6s var(--ease);transition-delay:calc(var(--i,0) * 35ms)}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still .car-dots button.is-on::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .car-dots button.is-on::after{transform:scaleX(1)}
  .rv-pre>.row-h,.rv-pre .gcard,.rv-pre .cr,.rv-pre .pv,.rv-pre>.rv-i{opacity:1;translate:none}
  .t-main img{transform:none}
}

/* ---------- 23. DIALOG CONTENT TUNING ---------- */
dialog.dlg.pop.ntf-pop{width:400px}
.sr-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.sr-grid .gc .cv-t{font-size:14px}
@media (max-width:767px){
  .sr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sr-grid .gc{padding:8px}
  .sr-grid .gc .cv-t{font-size:11px}
  .sr-grid .gc .cv-p{font-size:9px}
  .sr-grid .players{font-size:10px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .opts.cols-2{grid-template-columns:minmax(0,1fr)}
  .addr{grid-template-columns:minmax(0,1fr);justify-items:start}
}
.dlg-b{grid-auto-rows:max-content}
dialog.dlg:focus,dialog.dlg:focus-visible{outline:none}
/* surfaces nested in a char panel go one step deeper/lighter so they stay visible */
.panel .ctl,.panel .opt,.tbl-wrap .ctl{background:rgba(12,12,12,.42)}
.panel .opt:hover{background:rgba(12,12,12,.6)}
.panel .opt:has(input:checked){background:linear-gradient(0deg,rgba(255,153,0,.07),rgba(255,153,0,.07)),rgba(12,12,12,.42)}
.panel .seg,.panel .stat,.panel .note:not(.warn):not(.ok):not(.fail):not(.info),.panel .file,.acc-group .acc-b .note{background:var(--char-2)}
.panel .btn:where(:not(.hot,.bone,.ghost,.quiet,.danger)),.panel .x,.panel .icon-btn{background:var(--char-2)}
.panel .btn:where(:not(.hot,.bone,.ghost,.quiet,.danger)):hover,.panel .icon-btn:hover{background:var(--char-3)}
.panel .pick{background:transparent}
.panel .pick[aria-pressed="true"]{background:var(--bone)}
.ctl select{display:block;height:100%;line-height:normal}

/* ---------- 24. ACCOUNT PAGES (profile, history, transactions) ---------- */
/* identity strip: avatar, name, meta, side status */
.who{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,320px);gap:16px 24px;align-items:center}
.who-t{display:grid;gap:8px;min-width:0}
.who-n{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.who-id{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--bone);font-variant-numeric:tabular-nums}
.who-id>span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.who-side{display:grid;gap:14px;align-content:center;padding-left:24px;border-left:1px solid var(--line)}
/* limit form (responsible gaming): selects + amount + action, reflows by its own width */
.lim-wrap{container-type:inline-size}
.lim-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr) auto;gap:8px;align-items:end}
.lim-form.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.lim-form.one{grid-template-columns:minmax(0,1fr) auto}
.lim-form>.field{grid-template-columns:minmax(0,1fr)}
@container (max-width:440px){
  .lim-form,.lim-form.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lim-form>.btn{grid-column:1/-1;width:100%}
  .lim-form:not(.two):not(.one)>.field:nth-child(3){grid-column:1/-1}
}
/* six-digit code input */
.ctl.code{height:56px}
.ctl.code input{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.45em;font-variant-numeric:tabular-nums}
/* lists inside notes (requirements, do / don't) */
.note ul{margin:6px 0 0;padding-left:1.1em;display:grid;gap:2px}
.note>div>b{color:var(--bone);font-weight:600}
/* actions at the end of a .file row */
.file .fa{flex:none;display:flex;align-items:center;gap:4px}
.file .ft .prog{margin-top:6px}
/* sportsbook selections inside a table title cell */
.bet-legs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.bet-legs li{display:grid;padding-left:12px;border-left:2px solid var(--line-2)}
.bet-legs b{font-size:13px;font-weight:500}
.bet-legs small{font-size:12px;color:var(--ash)}
.tbl td.top{vertical-align:top}
/* keep stacked content inside the column on narrow screens (auto tracks grew to the min-content of inputs) */
:is([data-page="profile"],[data-page="history"],[data-page="transactions"]) :is(.stack,.stack-s,.panel,.field){grid-template-columns:minmax(0,1fr)}
/* secondary table column: hidden on tablets (768–1100), kept in desktop rows and mobile cards */
@media (min-width:768px) and (max-width:1100px){.tbl .col-opt{display:none}}
@media (max-width:767px){
  .who{grid-template-columns:auto minmax(0,1fr);gap:14px 16px}
  .who .avatar.xl{width:64px;height:64px;font-size:17px}
  .who-n{font-size:19px}
  .who-side{grid-column:1/-1;padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
  .file{flex-wrap:wrap}
  .file .fa{margin-left:48px}
  .tbl.cards td:empty{display:none}
  .tbl-foot .pager{gap:2px}
  .tbl-foot .pager a,.tbl-foot .pager span{min-width:30px;height:32px;padding:0 4px}
}

/* ---------- 25. BONUSES, PROMOTIONS, VIP (bonuses, promo, promo-one, vip) ---------- */
/* countdown: <span class="timer" data-timer="+7d"> — cells are built by app.js */
.timer{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.timer .tm{display:grid;justify-items:center;gap:5px;min-width:44px}
.timer .tm b{display:grid;place-items:center;width:100%;height:40px;padding:0 6px;border-radius:var(--r-s);background:var(--char-2);font-size:17px;font-weight:500;color:var(--bone)}
.timer .tm small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.timer .sep{height:40px;display:grid;place-items:center;font-size:14px;color:var(--ash)}
.timer.sm .tm{min-width:34px}.timer.sm .tm b{height:30px;font-size:13px}.timer.sm .sep{height:30px}
.t-main .timer .tm b,.wstep.cur .timer .tm b,.panel.heat .timer .tm b{background:rgba(12,12,12,.42)}
.t-main .timer .tm small,.wstep.cur .timer .tm small{color:rgba(243,240,235,.72)}
.timer-l{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.timer-l>span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}

/* promo code bar */
.pcode{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(280px,440px);align-items:center;gap:12px 16px;padding:16px 16px 16px 20px;border-radius:var(--r-l);background:var(--char)}
.pcode .pc-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.pcode .pc-t b{display:block;font-size:15px;font-weight:600}
.pcode .pc-t small{display:block;font-size:13px;color:var(--ash)}
.pcode .field{gap:6px}
.pcode .ctl{background:rgba(12,12,12,.42)}
.pcode .ctl input{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.pcode .ctl input::placeholder{text-transform:none;letter-spacing:0;font-family:var(--body)}

/* offer card: bonuses and promotions. .of-art holds an image (with overlay) or a hatched placeholder */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offer{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-l);background:var(--char);overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .2s}
a.offer:hover,a.offer:focus-visible{box-shadow:inset 0 0 0 1.5px var(--flare);outline:none}
.of-art{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;gap:12px;min-height:152px;padding:18px 20px;background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.028) 11px 12px),linear-gradient(180deg,#1c191a,#262223);box-shadow:inset 0 -1px 0 var(--line)}
.of-art img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 42%;transition:transform .7s var(--ease)}
.of-art:has(img)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(12,12,12,0) 30%,rgba(12,12,12,.62) 60%,rgba(12,12,12,.94) 100%)}
a.offer:hover .of-art img{transform:scale(1.04)}
.of-art .of-ic{position:absolute;top:18px;right:20px;color:rgba(243,240,235,.3)}
.of-art .tag{position:absolute;top:16px;left:16px;background:rgba(12,12,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.of-v{font-family:var(--display);font-weight:700;font-size:30px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.of-v small{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;color:rgba(243,240,235,.72)}
.of-b{flex:1;display:grid;gap:8px;align-content:start;padding:18px 20px 0}
.of-b:last-child{padding-bottom:20px}
.of-b h3{font-size:15px;line-height:1.2}
.of-b p{font-size:14px;line-height:1.5;color:var(--ash)}
.of-tags{display:flex;flex-wrap:wrap;gap:6px}
.of-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ash)}
.of-meta b{font-weight:500;color:var(--bone);text-align:right}
.of-f{display:flex;gap:8px;padding:16px 20px 20px}
.of-f .btn{flex:1}

/* welcome pack: three deposit steps */
.wpack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wstep{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:14px;align-content:start;padding:24px;border-radius:var(--r-l);background:var(--char);min-width:0}
.wstep.cur{background:var(--heat)}
.ws-k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.wstep.cur .ws-k{color:rgba(243,240,235,.8)}
.ws-v{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.4vw,48px);line-height:.9;text-transform:uppercase}
.wstep.lock .ws-v{color:transparent;-webkit-text-stroke:1.2px rgba(243,240,235,.42)}
.ws-cap{font-size:15px;color:var(--bone-2)}
.ws-cap b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.ws-t{display:flex;flex-wrap:wrap;gap:6px}
.wstep.cur .tag{background:rgba(12,12,12,.35);color:var(--bone)}
.ws-f{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:40px;font-size:13px;color:var(--ash)}

/* active bonus with wagering */
.bact{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:stretch}
.bact-h{display:flex;align-items:center;gap:16px;min-width:0}
.bact-art{flex:none;position:relative;width:104px;height:72px;border-radius:var(--r-m);overflow:hidden;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(243,240,235,.04) 7px 8px),var(--char-2);box-shadow:inset 0 0 0 1px var(--line)}
.bact-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bact-h h3{font-size:17px;line-height:1.15}
.bact-h .cluster{margin-top:8px}
.bact-pr{display:grid;gap:10px}
.bact-pr .ph-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--ash)}
.bact-pr .ph-l b{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.02em;color:var(--bone);font-variant-numeric:tabular-nums}
.bact-side{display:grid;gap:12px;align-content:stretch}
.bact-side .stat .v.lg{font-size:32px}
.bact .note .cluster{margin-top:12px}

/* promo detail */
.p-hero{min-height:400px}
.p-hero .t-h{font-size:clamp(28px,4vw,48px);line-height:1}
.p-hero .timer-l{margin-top:8px}
.p-hero .timer-l>span:first-child{color:rgba(243,240,235,.78)}
.pone{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px 24px;align-items:start}
.pone-side{position:sticky;top:calc(var(--hdr-h) + 16px)}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:hs}
.hsteps li{counter-increment:hs;display:grid;gap:8px;align-content:start;padding:20px;border-radius:var(--r-l);background:var(--char)}
.hsteps li::before{content:counter(hs);font-family:var(--display);font-weight:700;font-size:40px;line-height:.9;color:transparent;-webkit-text-stroke:1.2px rgba(243,240,235,.4);margin-bottom:6px}
.hsteps b{font-size:15px;font-weight:600}
.hsteps small{font-size:13px;line-height:1.5;color:var(--ash)}
.rules{margin:0;padding:0;list-style:none;display:grid;counter-reset:rl}
.rules li{counter-increment:rl;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--bone-2)}
.rules li:first-child{border-top:0;padding-top:0}
.rules li:last-child{padding-bottom:0}
.rules li::before{content:counter(rl,decimal-leading-zero);padding-top:3px;font-family:var(--mono);font-size:12px;color:var(--ash)}

/* VIP */
.vip-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end}
.vip-who{display:flex;align-items:center;gap:14px;min-width:0}
.vip-who b{display:block;font-size:17px;font-weight:600}
.vip-pct{font-family:var(--mono);font-size:clamp(40px,5vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;text-align:right}
.vip-pct small{font-size:.4em;letter-spacing:0;color:var(--ash)}
.vlv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vl{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:16px;align-content:start;padding:24px;border-radius:var(--r-l);background:var(--char);min-width:0}
.vl-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.vl h3{font-size:20px;line-height:1.05}
.vl-sum{display:grid;gap:4px}
.vl-sum b{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vl-sum small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.vl.is-now{box-shadow:inset 0 0 0 1.5px var(--flare)}
.vl.top{background:var(--heat)}
.vl.top .vl-sum small,.vl.top .mono{color:rgba(243,240,235,.78)}
.perks{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14px;line-height:1.4;color:var(--ash)}
.perks li{display:flex;align-items:flex-start;gap:10px}
.perks svg{flex:none;margin-top:1px}
.perks li.new{color:var(--bone)}
.perks li.new svg{color:var(--flare)}
.vl.top .perks{border-top-color:rgba(243,240,235,.2)}
.vl.top .perks li,.vl.top .perks li.new svg{color:var(--bone)}
.vpvs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vpv{display:grid;gap:12px;align-content:start;padding:20px;border-radius:var(--r-l);background:var(--char);min-width:0}
.vpv-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.vpv h3{font-size:15px;line-height:1.2}
.vpv p{font-size:14px;line-height:1.5;color:var(--ash)}
.vpv .tag{justify-self:start}
.cback{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 40px;align-items:center;padding:clamp(24px,3.4vw,40px)}
.cback .cb-v{font-family:var(--display);font-weight:700;font-size:clamp(64px,8vw,112px);line-height:.82;letter-spacing:-.03em}
.cback p{max-width:44ch;color:rgba(243,240,235,.85);font-size:15px}
.cback .kv{padding:4px 20px;border-radius:var(--r-m);background:rgba(12,12,12,.5)}
.cback .kv dt{color:rgba(243,240,235,.7)}
.cback .kv>div{border-top-color:rgba(243,240,235,.12)}
.sup{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.sup .vpv-ic{flex:none}
.sup>div{flex:1;min-width:220px;display:grid;gap:4px}
.sup h3{font-size:15px}
.sup p{font-size:14px;color:var(--ash)}

@media (max-width:1100px){
  .offers,.vlv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vpvs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bact{grid-template-columns:minmax(0,1fr)}
  .bact-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pone{grid-template-columns:minmax(0,1fr)}
  .pone-side{position:static}
}
@media (max-width:960px){
  .pcode{grid-template-columns:auto minmax(0,1fr)}
  .pcode .field{grid-column:1/-1}
  .p-hero{min-height:380px}
}
@media (max-width:767px){
  .offers{grid-template-columns:minmax(0,1fr)}
  .of-art{min-height:128px}
  .wpack,.vlv{display:flex;gap:8px;margin-inline:-16px;padding-inline:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
  .wpack::-webkit-scrollbar,.vlv::-webkit-scrollbar{display:none}
  .wstep,.vl{flex:none;width:78%;max-width:320px;scroll-snap-align:start;padding:20px}
  .timer .tm{min-width:38px}.timer .tm b{height:34px;font-size:15px}.timer .sep{height:34px}
  .pcode{padding:16px;border-radius:22px}
  .bact-h{align-items:flex-start}
  .bact-art{width:72px;height:56px}
  .bact-side{gap:8px}
  .bact-side .stat{padding:14px}
  .bact-side .stat .v,.bact-side .stat .v.lg{font-size:20px}
  .p-hero{min-height:0;padding:24px 20px}
  .hsteps{grid-template-columns:minmax(0,1fr)}
  .hsteps li{grid-template-columns:auto minmax(0,1fr);column-gap:16px;border-radius:22px}
  .hsteps li::before{grid-row:span 2;font-size:32px;margin:0}
  .rules li{font-size:14px;grid-template-columns:28px minmax(0,1fr)}
  .vip-top{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .vpvs{grid-template-columns:minmax(0,1fr);gap:8px}
  .vpv{grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:16px;border-radius:22px}
  .vpv-ic{grid-row:span 3}
  .cback{grid-template-columns:minmax(0,1fr)}
  .cback .kv{padding:4px 16px}
}

/* ---------- 26. CASINO, CATEGORY, GAME PAGES (casino.html, category.html, game.html + assets/js/catalog.js) ---------- */
/* page header with an icon and meta tags */
.ph-t{display:flex;align-items:center;gap:14px;min-width:0}
.ph-ic{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--char);box-shadow:inset 0 0 0 1px var(--line);color:var(--flare)}
.ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ph-meta .tag>i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
/* catalog tools: search, provider, sort, then quick filters */
.cat-tools{display:grid;gap:12px;min-width:0}
.cat-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px) minmax(0,220px);gap:8px}
.cat-f .ctl input,.cat-f .ctl select{font-size:14px}
.picks.lane-x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}
.picks.lane-x::-webkit-scrollbar{display:none}
.pick svg{flex:none}
.row-h button.all{border:0;background:transparent;font-family:inherit;cursor:pointer}
/* grid variants + load more */
.games.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.more{display:grid;justify-items:center;gap:12px;padding-top:12px}
.more p{font-family:var(--mono);font-size:12px;color:var(--ash)}
.more .prog{width:min(260px,100%)}
.more .btn{min-width:200px}
/* all providers grid */
.prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.prov-grid .pv{aspect-ratio:auto;height:96px;align-content:center;gap:8px;padding:0 12px;white-space:normal}
.pv small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.02em;color:var(--ash)}
/* other categories: icon tiles on a page */
.tiles.cat-tiles{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.tiles.cat-tiles a{padding:18px 8px 14px}
.tiles.cat-tiles svg{color:var(--ash);transition:color .15s}
.tiles.cat-tiles a:hover svg{color:var(--flare)}
/* game page: play area + recommended column */
.gv{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.gv.solo{grid-template-columns:minmax(0,1fr)}
.gv.solo .gv-aside{display:none}
.gv-main{min-width:0;border-radius:var(--r-l);background:var(--char);overflow:hidden}
.gv-main .icon-btn{background:var(--char-2)}
.gv-main .icon-btn:hover{background:var(--char-3)}
.gv-main .icon-btn[aria-pressed="true"]{color:var(--flare)}
.gv-frame{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:16/9;min-height:360px;max-height:calc(100vh - var(--hdr-h) - 140px);overflow:hidden;background:radial-gradient(55% 75% at 50% 48%,rgba(142,21,4,.42),rgba(255,153,0,.05) 55%,transparent 80%),repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.026) 11px 12px),var(--soot-2)}
.gv-frame:fullscreen{max-height:none;aspect-ratio:auto;width:100vw;height:100vh}
.gv-stage{display:grid;justify-items:center;gap:14px;padding:24px;text-align:center}
.gv-stage .gc{width:clamp(128px,12vw,176px);box-shadow:inset 0 0 0 1px rgba(243,240,235,.12),0 24px 60px -20px rgba(0,0,0,.8)}
.gv-stage .gc::after{display:none}
.gv-note{font-family:var(--mono);font-size:12px;color:var(--ash)}
.gv-go{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gv-run{position:absolute;inset:0;display:none;place-items:center;align-content:center;gap:10px;padding:24px;text-align:center;background:linear-gradient(115deg,transparent 42%,rgba(243,240,235,.05) 50%,transparent 58%),repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.03) 11px 12px),linear-gradient(180deg,#1c191a,#262223)}
.gv-run-t{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1;text-transform:uppercase;text-wrap:balance}
.gv-run p{font-size:13px;color:var(--ash)}
.gv-run .x{position:absolute;top:12px;right:12px;background:rgba(12,12,12,.6)}
.gv-run .tag{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:11px;background:rgba(12,12,12,.6)}
.gv-frame.on .gv-stage{visibility:hidden}
.gv-frame.on .gv-run{display:grid}
.gv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.gv-bar .sp{flex:1}
.gv-bar .lm{font-size:13px;color:var(--ash)}
.gv-bar .seg{background:var(--char-2)}
.gv-bar .ctl.sel.sm{height:40px;padding:0 34px 0 14px;background:var(--char-2);box-shadow:none}
.gv-bar .ctl.sel.sm::after{right:14px;width:8px;height:8px}
.gv-bar .ctl select{font-family:var(--mono);font-size:13px}
.gv-prov{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);min-width:0}
.gv-logo{flex:none;height:40px;min-width:104px;padding:0 14px;display:grid;place-items:center;border-radius:var(--r-s);background:var(--char-2);color:var(--bone);white-space:nowrap}
.gv-logo>span{font-size:12px}
.gv-prov .t{flex:1;min-width:0;display:grid}
.gv-prov b{font-size:14px;font-weight:600}
.gv-prov small{font-size:12px;color:var(--ash)}
.gv-aside{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:8px;align-content:start;padding:16px 12px 12px;border-radius:var(--r-l);background:var(--char);max-height:calc(100vh - var(--hdr-h) - 32px);overflow:auto;scrollbar-width:thin}
.gv-aside .panel-h{padding:0 4px 0 8px}
.gv-aside .x{background:var(--char-2)}
.rec-l{display:grid;gap:2px}
.rec{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:var(--r-m);color:inherit;text-decoration:none;transition:background-color .15s}
.rec:hover{background:var(--char-2)}
.rec:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.rec-t{display:grid;gap:1px;min-width:0}
.rec-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-t small{font-size:12px;color:var(--ash)}
.rec-m{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;min-width:0}
.rec-m .players{font-size:11px}
.rec-m .mono{white-space:nowrap}
.gv-about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start}
.gv-about p{color:var(--bone-2);font-size:15px;line-height:1.65}
@media (max-width:1180px){
  .gv{grid-template-columns:minmax(0,1fr)}
  .gv-aside{position:static;max-height:none;overflow:visible}
  .gv-aside .x,.gv-wide{display:none}
  .rec-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
}
@media (max-width:960px){
  .gv-about{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .ph-ic{width:40px;height:40px}
  .cat-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-f>:first-child{grid-column:1/-1}
  .picks.lane-x{margin-inline:-16px;padding-inline:16px}
  .games.wide{grid-template-columns:minmax(0,1fr)}
  .prov-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .prov-grid .pv{height:76px;padding:0 6px;gap:6px}
  .prov-grid .wm-a,.prov-grid .wm-c{font-size:10px}.prov-grid .wm-b{font-size:13px}.prov-grid .wm-d{font-size:9px}.prov-grid .wm-e{font-size:12px}
  .tiles.cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles.cat-tiles a{padding:14px 4px 10px;font-size:11px}
  .gv-main{border-radius:22px}
  .gv-frame{aspect-ratio:auto;min-height:0;max-height:none}
  .gv-stage{padding:28px 16px 24px}
  .gv-stage .gc{width:128px}
  .gv-bar{padding:10px 12px;gap:6px}
  .gv-bar .lm{display:none}
  .gv-bar .seg{flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .gv-prov{padding:10px 12px}
  .gv-logo{min-width:0;padding:0 10px}
  .gv-aside{padding:14px 8px 8px;border-radius:22px}
  .rec-l{grid-template-columns:minmax(0,1fr)}
  .rec-l>:nth-child(n+5){display:none}
}
/* select text sat at the top of .ctl in Chromium: centre it by line box (48 default, 40 for .sm) */
.ctl.sel select{line-height:46px}
.ctl.sel.sm select{line-height:38px}
@media (min-width:1181px){.prov-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
/* .slots.lane: a 7-up slots row on desktop that becomes a swipe lane at <=960 (casino and game pages) */
@media (max-width:960px){
  .slots.lane{grid-template-columns:none;grid-auto-columns:168px}
  .slots.lane>:nth-child(n){display:grid;scroll-snap-align:start}
}
@media (max-width:767px){
  [data-catalog] .games:not(.wide){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  [data-catalog] .games:not(.wide) .gc{padding:8px}
  [data-catalog] .games:not(.wide) .gc .cv-t{font-size:11px}
  [data-catalog] .games:not(.wide) .gc .cv-p{font-size:9px}
  [data-catalog] .games:not(.wide) .gc .badge,[data-catalog] .games:not(.wide) .gc .pill{top:6px;left:6px;height:16px;padding:0 6px;font-size:8px}
  [data-catalog] .games:not(.wide) .players{font-size:10px}
}
.gv-about{align-items:stretch}
.gv-about>.panel{align-content:start}
@media (max-width:767px){
  .gv-prov .gv-logo{display:none}
  .gv-stats .stat .v{font-size:17px;white-space:nowrap}
}

/* ---------- 25. MOBILE GAME RAILS: one tile size (Top 10, Slots, any .slots.lane) ---------- */
@media (max-width:767px){
  .top10,.lane,.slots.lane{display:flex;container-type:inline-size;margin-inline:-16px;padding-inline:16px;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none;mask-image:none;-webkit-mask-image:none}
  .top10::-webkit-scrollbar,.lane::-webkit-scrollbar{display:none}
  .top10>*,.lane>*{flex:none;scroll-snap-align:start}
  .slots.lane>:nth-child(n){display:grid}
  .t10 .gcard,.lane>.gcard,.slots.lane>.gcard{width:calc((100cqw - 16px) / 3.3)}
  .top10 .gc,.lane .gc{padding:8px}
  .top10 .gc .cv-t,.lane .gc .cv-t{font-size:13px;line-height:1.05}
  .top10 .gc .cv-p,.lane .gc .cv-p{font-size:10px}
  .top10 .players,.lane .players{font-size:11px}
}
/* bonuses/promo/VIP follow-ups (belong to section 25. BONUSES, PROMOTIONS, VIP above) */
.p-hero{grid-column:1/-1;grid-row:auto}
@media (max-width:1100px){.bact-side>.panel{grid-column:1/-1}}
@media (max-width:767px){.p-hero img{height:52%;top:-4%;right:-20%;opacity:.8}.p-hero .t-h{margin-top:72px}}
.sup>.cluster{flex:none;display:flex;min-width:0}

/* ---------- 28. BANNERS (.bn) + CATALOG, CATEGORY, GAME, WALLET (casino.html, category.html, game.html, deposit dialog) ---------- */
/* Banner family. Text is always live HTML; the image is only the object/photo.
   .bn.hero = brand gradient + object (mix-blend lighten, left fade) · .bn.card = full-bleed photo + dark overlay from the bottom-left.
   Sizes: .bn.head 200 desktop / 168 mobile · .bn-pair cards 188 / 156 · .bn.in-grid 136 / 120 · .bn.strip 96 / auto · .bn.bonus (wallet) 132 / 120 */
.bn{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-width:0;min-height:176px;padding:24px 28px;border-radius:var(--r-l);background:var(--char);color:var(--bone);text-decoration:none}
.bn>img{position:absolute;z-index:-2;pointer-events:none;transition:scale .7s var(--ease)}
.bn.hero{background:var(--heat)}
.bn.hero>img{top:50%;right:0;height:150%;width:auto;aspect-ratio:1;translate:0 -50%;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.bn.card{background:var(--soot-2)}
.bn.card>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--bn-pos,70% 45%)}
.bn.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(12,12,12,0) 25%,rgba(12,12,12,.62) 55%,rgba(12,12,12,.94) 100%)}
.bn-t{display:grid;gap:6px;justify-items:start;min-width:0;max-width:min(100%,520px)}
.bn-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,240,235,.8)}
.bn-v{font-family:var(--display);font-weight:700;font-size:40px;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:var(--core);text-shadow:0 0 18px rgba(255,197,107,.45)}
.bn-v small{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.2;text-transform:none;color:var(--bone);text-shadow:none}
.bn-h{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.1;text-transform:uppercase}
.bn-p{max-width:46ch;font-size:14px;line-height:1.45;color:rgba(243,240,235,.84)}
.bn .bn-cta{margin-top:4px}
div.bn .bn-cta::after{content:"";position:absolute;inset:0;border-radius:inherit}  /* the whole banner is the button's hit area */
.bn .go{display:none}
a.bn:hover>img{scale:1.04}
a.bn:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
a.bn:hover .bn-cta{background:#fff}

/* category header banner (Stake): title, two-line description, meta, object bleeding off the right */
.cat-ph{gap:12px}
.bn.head{min-height:200px;padding:32px 40px;gap:0}
.bn.head .bn-t{gap:12px;max-width:min(60%,620px)}
.bn.head h1{font-size:var(--h1);line-height:1.05}
.bn.head .bn-p{font-size:15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} /* 3 lines: longer RU leads wrap instead of ending in an ellipsis */
.bn.head .tag{background:rgba(12,12,12,.45);color:var(--bone);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bn.head .ph-ic{background:rgba(12,12,12,.45);box-shadow:inset 0 0 0 1px rgba(243,240,235,.16);color:var(--bone)}
.bn.hero.head>img{right:6%;height:180%}
.bn.card.head{background:linear-gradient(90deg,var(--soot-2) 35%,#3a0a03)}
.bn.card.head>img{inset:0 0 0 auto;width:52%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%);--bn-pos:50% 50%}
.bn.card.head::before{background:linear-gradient(90deg,rgba(12,12,12,.7) 30%,rgba(12,12,12,0) 70%)}

/* two half-width promo cards between rails (1win) */
.bn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bn-pair .bn{min-height:188px;justify-content:flex-end}
.bn-pair .bn.hero>img{height:150%;right:-2%}

/* promo row inside a catalog grid, after the second row of covers */
.bn.in-grid{grid-column:1/-1;min-height:136px;flex-direction:row;align-items:center;gap:28px;padding:20px 28px}
.bn.in-grid .bn-t{flex:none}
.bn.in-grid .bn-v{font-size:34px}
.bn.in-grid .bn-p{flex:1;min-width:0}
.bn.in-grid .bn-cta{flex:none;margin:0 0 0 auto}
.bn.in-grid.card>img{--bn-pos:50% 55%}
.bn.in-grid.hero>img{right:10%;height:190%}

/* welcome strip under the game frame */
.bn.strip{min-height:96px;flex-direction:row;align-items:center;gap:24px;padding:16px 20px 16px 28px}
.bn.strip .bn-t{flex:none}
.bn.strip .bn-v{font-size:30px}
.bn.strip .bn-v small{margin-top:6px}
.bn.strip .bn-p{flex:1;min-width:0}
.bn.strip .bn-cta{flex:none;margin:0 0 0 auto}
.bn.strip>img{right:12%;height:260%;top:78%}

/* H1: one moderate size for every page (.ph h1 and the h1 inside a header banner) */
:root{--h1:clamp(26px,2.3vw,32px)}

/* category bar: icon tabs, active = Flare icon + underline (Pinco) */
.cat-bar{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.cat-bar::-webkit-scrollbar{display:none}
.cb-i{position:relative;flex:1 0 auto;min-width:92px;height:76px;display:grid;justify-items:center;align-content:center;gap:8px;padding:0 12px;border-radius:var(--r-m);color:var(--ash);font-size:12px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.cb-i svg{color:var(--bone);opacity:.72;transition:color .15s,opacity .15s}
.cb-i:hover{background:var(--char);color:var(--bone)}
.cb-i:hover svg{opacity:1}
.cb-i[aria-current]{background:var(--char);color:var(--bone)}
.cb-i[aria-current] svg{color:var(--flare);opacity:1}
.cb-i[aria-current]::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--flare)}
.cb-i:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}

/* catalog tools: search (Ctrl K) | Providers | Sort */
.cp .cat-f{grid-template-columns:minmax(0,1fr) 240px 200px}
.cp .cat-f .field{grid-template-columns:minmax(0,1fr)}
.cf-kbd{flex:none;height:24px;padding:0 8px;display:grid;place-items:center;border-radius:var(--r-s);background:var(--char-2);font-family:var(--mono);font-size:11px;color:var(--ash)}
.cp .cat-f .ctl input,.cp .cat-f .ctl select{font-size:15px}
/* catalog grid: fixed 7 / 6 / 5 / 3 columns (Stake density) */
.cp [data-catalog] .games:not(.wide){grid-template-columns:repeat(7,minmax(0,1fr))}
.cp [data-catalog] .games.wide{grid-template-columns:repeat(4,minmax(0,1fr))}
/* load more: centred button on a divider line */
.more{gap:10px;padding-top:8px}
.more-l{display:flex;align-items:center;gap:16px;width:100%}
.more-l::before,.more-l::after{content:"";flex:1;height:1px;background:var(--line)}
.more-b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .15s,box-shadow .15s}
.more-b:hover{background:var(--char);box-shadow:inset 0 0 0 1px var(--line-3)}
.more-b:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.more .prog{width:min(200px,100%)}

/* live bets table */
.bets-n{width:auto}
.bets-n select{font-family:var(--mono);font-size:13px}
.tbl .t-cell b a{color:inherit;text-decoration:none}
.tbl .t-cell b a:hover{text-decoration:underline;text-underline-offset:3px}
.tbl .thumb.rk{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--bone)}
.tbl .thumb.rk.top{background:var(--heat);box-shadow:none}
.bets-race{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ash)}
.bets-race b{font-family:var(--mono);font-weight:500;color:var(--bone)}

/* game page */
.gv-col{min-width:0;display:grid;gap:12px;align-content:start}
.gp .gv-bar{flex-wrap:nowrap;justify-content:space-between}
.gv-tools{display:flex;align-items:center;gap:6px;min-width:0}
.gv-mode{display:flex;align-items:center;gap:8px;flex:none}
.gv-fair{height:32px;padding:0 12px;margin-left:6px;color:var(--bone-2)}
.gv-fair svg{color:var(--ok)}
.gp .gv-prov{border-top:0;border-radius:var(--r-l);background:var(--char);padding:12px 12px 12px 16px}
.gp .gv-prov .gv-logo{background:var(--char-2)}
.gp .gv-prov .btn:not(.quiet){background:var(--char-2)}
.gp .gv-prov .btn[aria-pressed="true"]{background:var(--bone);color:var(--soot)}
.gp .rec-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp .rec-t .players{margin-top:3px;font-size:11px}
.gv-info{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
.gv-doc{gap:28px}
.gv-desc{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:start}
.gv-desc .gc{width:132px;padding:10px}
.gv-desc .gc::after{display:none}
.gv-desc .gc .cv-t{font-size:14px}
.gv-doc h3{font-size:15px;line-height:1.2}
.gv-doc p{color:var(--bone-2);font-size:15px;line-height:1.65}
.gv-sec{display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.gv-doc .rules li{font-size:14px}
.gv-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:24px}
.gv-sec>summary::-webkit-details-marker{display:none}
.gv-sec>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);rotate:45deg;translate:0 -2px;transition:rotate .2s}
.gv-sec[open]>summary::after{rotate:225deg;translate:0 2px}
.gv-sec>summary:focus-visible{outline:2px solid var(--flare);outline-offset:4px;border-radius:var(--r-s)}
.gv-sec:not([open]){gap:0}
.ptbl-wrap{border-radius:var(--r-m);background:var(--char-2);overflow-x:auto}
.ptbl{width:100%;border-collapse:collapse;font-size:14px}
.ptbl th{padding:10px 16px;text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--line);white-space:nowrap}
.ptbl td{padding:10px 16px;border-bottom:1px solid var(--line)}
.ptbl tr:last-child td{border-bottom:0}
.ptbl .r{text-align:right}
.ptbl .n{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gv-fl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gv-fl>div{padding:14px 16px;border-radius:var(--r-m);background:var(--char-2)}
.gv-fl dt{font-size:14px;font-weight:600}
.gv-fl dd{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ash)}
.gv-side{display:grid;gap:12px;align-content:start;position:sticky;top:calc(var(--hdr-h) + 16px)}
.gv-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gv-side .stat .v{font-size:20px;white-space:nowrap}

@media (max-width:1180px){
  .cp [data-catalog] .games:not(.wide){grid-template-columns:repeat(6,minmax(0,1fr))}
  .cp [data-catalog] .games.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gv-info{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:960px){
  .cp [data-catalog] .games:not(.wide){grid-template-columns:repeat(5,minmax(0,1fr))}
  .cp [data-catalog] .games.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp .cat-f{grid-template-columns:minmax(0,1fr) 200px 180px}
  .gv-info{grid-template-columns:minmax(0,1fr)}
  .gv-side{position:static;grid-template-columns:minmax(0,1fr)}
  .gv-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bn.head .bn-t{max-width:66%}
  .bn.strip .bn-p{display:none}
  .bn-pair .bn.hero>img{right:-30%}
  .bn-pair .bn-p{max-width:26ch}
}

/* ----- mobile (390 is the primary target) ----- */
@media (max-width:767px){
  :root{--h1:24px}
  .ph h1{font-size:var(--h1)}
  :is(.cp,.gp) .crumbs{display:none}
  :is(.cp,.gp) .row-h .all{padding:12px 0 12px 12px;margin:-12px 0}
  /* banners */
  .bn{min-height:0;padding:18px 18px;gap:8px;border-radius:22px}
  .bn-v{font-size:28px}
  .bn-v small{margin-top:6px;font-size:11px}
  .bn-p{font-size:13px}
  .bn.head{min-height:168px;padding:20px 18px;justify-content:flex-end}
  .bn.head .bn-t{max-width:72%;gap:8px}
  .bn.head .ph-t{gap:10px}
  .bn.head .ph-ic{width:36px;height:36px}
  .bn.head .bn-p{font-size:13px;line-height:1.4;max-width:30ch}
  .bn.head .ph-meta .tag:nth-child(2){display:none}
  .bn.hero.head>img{right:-36%;height:135%;top:40%;opacity:.9}
  .bn.card.head>img{width:70%}
  .bn-pair{gap:8px}
  .bn-pair .bn{min-height:164px;padding:14px;gap:6px}
  .bn-pair .bn-v{font-size:26px}
  .bn-pair .bn-v small{font-size:10px;margin-top:5px}
  .bn-pair .bn-p{display:none}
  .bn-pair .bn-k{font-size:10px}
  .bn-pair .bn.hero>img{height:118%;right:-30%;top:36%}
  .bn.in-grid{min-height:120px;padding:16px;gap:12px}
  .bn.in-grid .bn-v{font-size:26px}
  .bn.in-grid .bn-p{display:none}
  .bn.in-grid .bn-h{font-size:12px}
  .bn.strip{flex-wrap:wrap;gap:12px 16px;padding:16px 16px 16px 18px}
  .bn.strip .bn-t{flex:1}
  .bn.strip .bn-v{font-size:26px}
  .bn.strip>img{right:-12%;height:220%}
  .bn.strip .bn-cta{align-self:flex-end}
  /* category bar bleeds to the edges */
  .cat-bar{margin-inline:-16px;padding:2px 16px;scroll-padding-inline:16px;gap:2px}
  .cb-i{flex:none;min-width:76px;height:64px;padding:0 8px;gap:6px;font-size:11px}
  .cb-i[aria-current]::after{left:18px;right:18px}
  /* search + Providers + sort: one sticky row under the header (1win / Pinco) */
  .cp .cat-tools{display:contents}
  .cp .cat-f{position:sticky;top:52px;z-index:20;grid-template-columns:minmax(0,1fr) 124px 48px;gap:8px;margin:-8px -16px;padding:8px 16px;background:rgba(12,12,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .cp .cat-f>:first-child{grid-column:auto}
  .cp .cat-f .ctl{height:48px;padding:0 14px}
  .cp .cat-f .ctl input,.cp .cat-f .ctl select{font-size:14px}
  .cp .cat-f .ctl.sel select{line-height:46px}
  .cp .cf-p .ctl{padding:0 28px 0 12px;gap:8px}
  .cp .cf-p .ctl.sel::after{right:12px;width:8px;height:8px}
  .cf-kbd{display:none}
  .cp .cf-p .ctl>svg{display:none}
  .ic-sel{padding:0!important;justify-content:center}
  .ic-sel::after{display:none}
  .ic-sel select{position:absolute;inset:0;width:100%;opacity:0}
  .cp .picks.lane-x{margin-top:-8px}
  .cp .picks.lane-x .pick{height:36px;padding:0 16px}
  .cp [data-catalog] .games:not(.wide){grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp [data-catalog] .games.wide{grid-template-columns:minmax(0,1fr)}
  /* bets: compact cards, 5 rows */
  .tbl.cards .m-hide{display:none}
  .bets-p .tbl.cards tbody tr:nth-child(n+6){display:none}
  .bets-n{display:none}
  .bets-p .tbl.cards tr{row-gap:8px}
  .bets-p .tbl.cards td[data-label="Bet"]{grid-column:1;justify-content:flex-start;gap:8px}
  .bets-p .tbl.cards td[data-label="Multiplier"]{grid-column:2;justify-content:flex-end;gap:8px}
  .gp .gv-sec>summary{min-height:44px;margin:-10px 0}
  .bets-race{padding:14px 18px}
  .tbl .thumb{width:36px;height:36px}
  /* game page */
  .gp .gv-main{border-radius:22px}
  .gp .gv-stage{padding:24px 16px 20px}
  .gp .gv-stage .gc{width:112px}
  .gp .gv-bar{flex-wrap:wrap;gap:10px;padding:10px 12px 12px}
  .gp .gv-tools{width:100%;gap:4px}
  .gp .gv-bar .icon-btn{width:44px;height:44px}
  .gv-pop{display:none!important}
  .gv-fair{margin-left:auto;height:32px;font-size:11px}
  .gv-mode{width:100%}
  .gp .gv-mode .ctl.sel.sm{flex:none;height:52px;padding:0 30px 0 14px;border-radius:var(--r-pill)}
  .gp .gv-mode .ctl.sel.sm select{line-height:50px}
  .gp .gv-mode .seg{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .gp .gv-mode .seg>button{height:44px;padding:0 10px}
  .gp .gv-prov{padding:10px 10px 10px 14px;gap:8px;border-radius:22px}
  .gp .gv-prov .btn{height:44px;padding:0 14px}
  .gp .gv-prov .btn.quiet{padding:0 8px}
  .gp .gv-prov .btn.quiet svg{display:none}
  .gv-desc{grid-template-columns:minmax(0,1fr);gap:16px}
  .gv-desc .gc{display:none}
  .gv-doc{gap:22px}
  .gv-doc p{font-size:14px}
  .gv-sec{padding-top:20px}
  .gv-fl{grid-template-columns:minmax(0,1fr)}
  .ptbl th,.ptbl td{padding:10px 12px}
  .gv-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gv-stats .stat{padding:14px}
  .gv-side .stat .v{font-size:17px}
  .gp .rec{padding:8px 6px;min-height:72px}
}
@media (max-width:380px){
  .cp .cat-f{grid-template-columns:minmax(0,1fr) 120px 48px}
  .gv-fair{display:none}
}

/* wallet dialog (app.js DLG.deposit): method tiles, amount chips, bonus card with a switch, one big CTA */
.wl .wl-ht{flex:1;min-width:0;display:grid;gap:2px}
.wl .wl-ht p{margin:0;font-size:13px}
.wl .wl-ht b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.wl .dlg-b{gap:20px}
.wl-p{gap:20px}
.wl-type{width:fit-content}
.wl-fs{border:0;margin:0;padding:0;min-width:0}
.wl-fs>legend{padding:0;margin-bottom:10px}
.pm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pm-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pm{position:relative;display:grid;align-content:start;gap:2px;min-width:0;min-height:96px;padding:12px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s,background-color .15s}
.pm:hover{background:var(--char-2)}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--flare);background:linear-gradient(0deg,rgba(255,153,0,.06),rgba(255,153,0,.06)),var(--char)}
.pm:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:2px}
.pm::after{content:"";position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3);transition:box-shadow .15s}
.pm:has(input:checked)::after{box-shadow:inset 0 0 0 5px var(--flare)}
.pm-lg{height:28px;display:flex;align-items:center;margin-bottom:8px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--bone)}
.pm b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm small{font-size:11px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wl-picks.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wl-picks .pick{justify-content:center;height:40px;font-size:13px}
.bn.bonus{min-height:132px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px 16px;padding:18px 20px}
.bn.bonus>img{right:16%;height:190%;top:58%}
.bn.bonus .bn-v{font-size:34px}
.bn.bonus .wl-sw{grid-column:2;grid-row:1;font-size:13px;font-weight:600;color:var(--bone)}
.bn.bonus .wl-sw input:checked{background:var(--bone)}
.bn.bonus .wl-sw input:checked::after{background:var(--soot)}
.bn.bonus .bn-p{grid-column:1/-1;font-size:13px;max-width:none}
.bn.bonus .bn-p b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.bn.bonus .link{color:var(--bone);text-decoration-color:rgba(243,240,235,.45)}
.bn.bonus.off{background:var(--char)}
.bn.bonus.off>img{opacity:.3;filter:grayscale(1)}
.bn.bonus.off .bn-v{color:var(--ash);text-shadow:none}
.sum .tot{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--bone)}
.sum .tot b{font-size:16px}
.wl-av .v{font-size:28px}
@media (max-width:767px){
  .wl .dlg-b{gap:16px}
  .wl-p{gap:16px}
  .wl-type{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .wl-type>button{height:40px;padding:0 8px}
  .pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm{min-height:84px}
  .pm-grid.c3{grid-template-columns:minmax(0,1fr)}
  .pm-grid.c3 .pm{min-height:60px;grid-template-columns:88px minmax(0,1fr);column-gap:8px;align-items:center;align-content:center;padding:10px 40px 10px 12px}
  .pm-grid.c3 .pm-lg{grid-row:span 2;margin:0}
  .pm-grid.c3 .pm::after{top:50%;translate:0 -50%}
  .wl-picks{gap:6px}
  .wl-picks .pick{height:44px;padding:0 4px}
  .bn.bonus{min-height:120px;padding:16px}
  .bn.bonus .wl-sw{padding:9px 0;margin:-9px 0}
  .bn.bonus .wl-sw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bn.bonus .bn-k{font-size:10px}
  .bn.bonus .bn-v{font-size:28px}
  .bn.bonus>img{right:-6%;height:170%}
  .wl-av .v{font-size:24px}
}

/* ---------- 27. LEGAL + HELP CENTRE, ABOUT (legal-*.html, help-*.html, about.html) ---------- */
/* legal: one document template. Header = title, lead, .ph-meta version tags, .tabs of the five documents.
   .doc.lg-doc = TOC | article | .lg-side (At a glance + contact/tools), the aside moves above the article below 1280 */
.lg-ph .tabs,.hc-ph .tabs{margin-top:10px}
.lg-doc{grid-template-columns:220px minmax(0,1fr) 280px;gap:40px}
.lg-doc>.toc{grid-column:1;grid-row:1/span 2}
.lg-doc>.prose{grid-column:2;grid-row:1/span 2;max-width:70ch;line-height:1.75}
.lg-side{grid-column:3;grid-row:1;position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:12px;align-content:start;min-width:0}
.lg-side .panel{gap:12px}
.lg-side .kv>div{padding:10px 0;gap:12px}
.lg-side .kv dt,.lg-side .kv dd{font-size:13px}
.lg-side .kv dd{font-family:var(--mono);font-weight:400;color:var(--bone)}
.lg-side p{font-size:14px;line-height:1.5;color:var(--ash)}
.lg-side .lg-fine{font-size:12px}
.lg-tools .link{justify-self:start;font-size:14px}
/* article parts converted from the reference documents */
.prose .note{margin-top:20px}
.prose .note p{font-size:14px;line-height:1.6}
.prose .lg-group{padding:16px 20px;border-radius:var(--r-m);background:var(--char)}
.prose .lg-group>*+*{margin-top:10px}
.prose .lg-group-t{color:var(--bone);font-weight:600}
.prose .lg-req{padding:2px 0 2px 14px;border-left:2px solid var(--line-2);font-size:14px;line-height:1.6;color:var(--ash)}
.prose .lg-tbl{border-radius:var(--r-m);overflow:hidden;background:var(--char)}
.prose .lg-tbl table{border-radius:0;background:none}
.prose .lg-tbl td{font-size:14px}
.prose .lg-tbl td:not(:first-child){font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.prose .lg-kv{padding:4px 20px;border-radius:var(--r-m);background:var(--char)}
.prose .lg-kv>div{grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:baseline}
.prose .lg-kv dd{text-align:left;overflow-wrap:anywhere;color:var(--bone)}
.prose .lg-addr{font-style:normal;display:grid;gap:2px;line-height:1.5}
.prose .lg-addr b{color:var(--bone)}
.prose .lg-foot{padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ash)}
.prose .lg-orgs{list-style:none;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.prose .lg-orgs li{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-m);background:var(--char);line-height:1.45}
.prose .lg-orgs a{font-weight:600}
.prose .lg-orgs span{font-family:var(--mono);font-size:12px;color:var(--ash)}
.prose .lg-orgs small{font-size:13px;color:var(--bone-2)}
@media (max-width:1280px){
  .lg-doc{grid-template-columns:220px minmax(0,1fr)}
  .lg-doc>.prose{grid-row:2}
  .lg-side{grid-column:2;position:static;grid-template-columns:repeat(2,minmax(0,1fr));max-width:70ch}
}
@media (max-width:960px){
  .lg-doc{grid-template-columns:minmax(0,1fr);gap:24px}
  .lg-doc>.toc,.lg-doc>.prose,.lg-side{grid-column:auto;grid-row:auto}
  .lg-doc>.toc{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
}
@media (max-width:767px){
  .lg-side{grid-template-columns:minmax(0,1fr)}
  .lg-doc>.prose{font-size:15px;line-height:1.7}
  .prose .lg-kv{padding:4px 16px}
  .prose .lg-kv>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .prose .lg-orgs{grid-template-columns:minmax(0,1fr)}
  .prose .lg-tbl thead{display:none}
  .prose .lg-tbl table,.prose .lg-tbl tbody,.prose .lg-tbl tr,.prose .lg-tbl td{display:block;width:100%}
  .prose .lg-tbl tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  .prose .lg-tbl tr:last-child{border-bottom:0}
  .prose .lg-tbl td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0}
  .prose .lg-tbl td::before{content:attr(data-label);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);align-self:center}
  .prose .lg-tbl td:first-child{padding-bottom:6px;font-weight:600;color:var(--bone)}
  .prose .lg-tbl td:first-child::before{display:none}
}
@media print{
  .rail,.hdr,.chips,.foot,.bnav,.lg-ph .tabs,.lg-ph .ph-actions,.lg-doc>.toc,.lg-side{display:none!important}
  .lg-doc{display:block}
}
/* help centre: one layout for help-faq, help-payments, help-kyc, help-support.
   .ph.hc-ph (eyebrow, h1, lead, .tabs sub-nav) + .hc-grid = .hc-main (sections) | .hc-side (sticky contact card) */
.hc-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.hc-main{display:grid;gap:40px;align-content:start;min-width:0}
.hc-main>section{display:grid;gap:16px;align-content:start;min-width:0}
.hc-side{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:12px;align-content:start;min-width:0}
.hc-side .panel{gap:12px}
.hc-side p,.hc-p{font-size:14px;line-height:1.55;color:var(--ash)}
.hc-upd{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ash)}
/* contact rows (aside, support channels) */
.hc-links{display:grid;gap:6px}
.hc-link{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;border-radius:var(--r-m);background:var(--char-2);transition:background-color .15s}
.hc-link:hover{background:var(--char-3)}
.hc-link:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.hc-link>svg:last-child{color:var(--ash)}
.hc-link .i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--char);color:var(--bone)}
.hc-link b{display:block;font-size:14px;font-weight:600}
.hc-link small{display:block;font-size:12px;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FAQ search + categories */
.hc-find{display:grid;gap:12px}
.hc-find .ctl{max-width:560px}
.hc-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.hc-meta .mono{font-size:12px}
.hc-cats .pick .n{font-family:var(--mono);font-size:11px;color:var(--ash);margin-left:6px}
.hc-cats .pick[aria-pressed="true"] .n{color:inherit;opacity:.7}
.acc-group .acc.hc-first{border-top:0}
.acc mark{background:rgba(255,153,0,.28);color:var(--bone);border-radius:3px;padding:0 1px}
.acc-b .kv{padding:0 16px;border-radius:var(--r-m);background:var(--char-2)}
/* numbered steps and check lists inside panels */
.hc-ol{list-style:none;margin:0;padding:0;counter-reset:hc;display:grid;gap:12px}
.hc-ol>li{counter-increment:hc;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.55;color:var(--bone-2)}
.hc-ol>li::before{content:counter(hc);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);font-family:var(--mono);font-size:12px;color:var(--bone)}
.hc-ol a,.hc-p a{color:var(--flare)}
.hc-chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hc-chk>li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.5;color:var(--bone-2)}
.hc-chk>li>svg{margin-top:2px;color:var(--ok)}
.hc-chk.no>li>svg{color:var(--fail)}
.hc-chk.mut>li>svg{color:var(--ash)}
.hc-req{padding:2px 0 2px 12px;border-left:2px solid var(--line-2);font-size:13px;line-height:1.55;color:var(--ash)}
.hc-card{align-content:start}
.hc-card .vpv-ic{width:40px;height:40px}
.hc-card h3{font-size:15px;line-height:1.2}
.hc-card>p{font-size:14px;line-height:1.55;color:var(--ash)}
.hc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.hc-two>.panel{align-content:start}
.hc-two .btn{justify-self:start}
.hc-form .btn.hot{justify-self:start;min-width:200px}
.hc-form .field{min-width:0}
@media (max-width:1100px){
  .hc-grid{grid-template-columns:minmax(0,1fr)}
  .hc-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .hc-main{gap:28px}
  .hc-side,.hc-two{grid-template-columns:minmax(0,1fr)}
  .hc-find .ctl{max-width:none}
  .hc-form .btn.hot{justify-self:stretch}
}
/* about: brand page. Hero = .tile.t-main.p-hero (lobby hero treatment; banner art lava-sphere, section 50) */
.ab-states{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ab-states li{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:6px;align-content:start;min-height:196px;padding:20px;border-radius:var(--r-l);background:var(--char)}
.ab-states .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.ab-states b{font-family:var(--display);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.ab-states small{font-size:13px;line-height:1.5;color:var(--ash)}
.ab-states .sh{width:44px;height:44px;margin-bottom:auto}
.ab-states .s1{border-radius:var(--r-s);background:var(--char-3)}
.ab-states .s2{border-radius:48% 52% 40% 60%/55% 45% 55% 45%;background:linear-gradient(160deg,var(--char-3),var(--char-2));box-shadow:inset 0 0 0 1px var(--line-2)}
.ab-states .s3{border-radius:50%;background:radial-gradient(circle,rgba(243,240,235,.22) 1.5px,transparent 2px) 0 0/9px 9px;box-shadow:inset 0 0 0 1px var(--line)}
.ab-states .s4{border-radius:50%;background:var(--orb);box-shadow:0 0 28px rgba(255,153,0,.45)}
.ab-states li.is-plasma{background:var(--heat)}
.ab-states li.is-plasma .k,.ab-states li.is-plasma small{color:rgba(243,240,235,.82)}
.ab-states li>div{display:grid;gap:4px;margin-top:28px}
.ab-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px 48px;align-items:start}
.ab-intro .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--bone)}
.ab-intro .stack p{font-size:16px;line-height:1.7;color:var(--bone-2);max-width:62ch}
.ab-key{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px 28px}
.ab-key .v{font-family:var(--mono);font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--bone);white-space:nowrap}
.ab-key .v small{display:block;margin-top:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,240,235,.78)}
.ab-key p{font-size:15px;line-height:1.65;color:rgba(243,240,235,.9)}
.ab-offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ab-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border-radius:var(--r-l);background:var(--char);color:inherit;text-decoration:none;transition:background-color .15s}
.ab-card:hover{background:var(--char-2)}
.ab-card:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.ab-card b{display:block;font-size:15px;font-weight:600}
.ab-card small{display:block;font-size:13px;line-height:1.45;color:var(--ash)}
.ab-card>svg:last-child{color:var(--ash);transition:translate .2s,color .2s}
.ab-card:hover>svg:last-child{translate:3px 0;color:var(--bone)}
.ab-sign{display:grid;justify-items:center;gap:10px;padding:40px 16px 8px;text-align:center}
.ab-sign b{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
@media (max-width:1100px){
  .ab-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-offer{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .ab-intro{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .ab-states{gap:8px}
  .ab-states li{min-height:0;padding:16px;border-radius:22px}
  .ab-states .sh{width:36px;height:36px}
  .ab-states li>div{margin-top:16px}
  .ab-states b{font-size:15px}
  .ab-states small{font-size:12px}
  .ab-offer{grid-template-columns:minmax(0,1fr);gap:8px}
  .ab-card{padding:14px 16px;border-radius:22px}
  .ab-key{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){.lg-side .lg-q{display:none}}
.ab-card .vpv-ic,.hc-card .vpv-ic{grid-row:auto}
.ab-intro .row-h{height:auto}
.ab-intro .row-h .ttl h2{white-space:normal}
@media (max-width:767px){
  .ab-hero .eyebrow{margin-top:72px}
  .ab-hero .t-h{margin-top:0}
  .ab-facts .stat .v{font-size:18px;white-space:nowrap}
  .ab-kv>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ab-kv dd{text-align:left}
}
.hc-meta .hc-cats{flex:1 1 auto;min-width:0}
@media (max-width:767px){.hc-meta .hc-cats{flex-basis:100%}}
.hc-main>section,.hc-find,.hc-side{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px) and (max-width:1100px){.hc-side{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 29. BATCH 2: catalog tools (casino, category), login dialog, bonuses, promotions, VIP ---------- */
/* catalog tools: .cat-f = search (sticky on mobile) · .cat-o = Providers + Sort + quick-filter chips.
   Desktop: one row search | Providers | Sort, chips under it. Mobile: search row (sticky), then Providers + Sort, then chips. */
.cp .cat-tools{grid-template-columns:minmax(0,1fr) 240px 200px;gap:12px 8px}
.cp .cat-f{grid-template-columns:minmax(0,1fr)}
.cp .cat-o{display:contents}
.cp .cat-o .field{grid-template-columns:minmax(0,1fr);min-width:0}
.cp .cf-chips{grid-column:1/-1}
@media (max-width:960px){.cp .cat-tools{grid-template-columns:minmax(0,1fr) 200px 180px}}
@media (max-width:767px){
  .cp .cat-f{grid-template-columns:minmax(0,1fr)}
  .cp .cat-o{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;margin-top:-12px;min-width:0}
  .cp .cat-o .ctl{height:44px;padding:0 28px 0 14px}
  .cp .cat-o .ctl>svg{display:none}
  .cp .cat-o .ctl.sel select{line-height:42px;font-size:14px}
  .cp .cat-o .ctl.sel::after{right:14px;width:8px;height:8px}
  .cp .cf-chips.picks.lane-x{margin:0 -16px;padding:2px 16px}
  .cp .cf-chips .pick{height:44px;padding:0 16px}
}
@media (max-width:380px){.cp .cat-f{grid-template-columns:minmax(0,1fr)}}
/* .bn-pair on phones: the object sits in the top half, the copy on a bottom scrim, so text never runs over the image */
@media (max-width:767px){
  .bn-pair .bn{min-height:184px}
  .bn-pair .bn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(12,12,12,.78) 0,rgba(12,12,12,.4) 45%,rgba(12,12,12,0) 62%)}
  .bn-pair .bn.card::before{display:none}
  .bn-pair .bn.hero>img{top:-10%;right:-14%;height:66%;translate:none;-webkit-mask-image:none;mask-image:none}
  .bn-pair .bn.card{background:linear-gradient(180deg,#3a0a03,var(--soot-2) 80%)}
  .bn-pair .bn.card>img{inset:-22% 0 22% 0;object-position:62% 10%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .bn-pair .bn-k{display:none}  /* the condition line under the number carries the context; the kicker would run over the object */
}

/* login dialog (app.js DLG.login, dialog.dlg.lg). Welcome bonus = two radio cards: a small .bn.hero and "No bonus".
   The submit button lives in .dlg-f: pinned at the bottom of the mobile sheet. */
dialog.dlg.lg{width:min(460px,calc(100vw - 32px))}
.lg .lg-ht{flex:1;min-width:0}
.lg .lg-ht p{margin-top:4px}
.lg .dlg-b{gap:16px}
.lg .dlg-f{gap:10px;padding-top:14px}
.lg .dlg-f .terms{margin:0}
.lg-bon{border:0;margin:0;padding:0;min-width:0}
.lg-bon>legend{width:100%;padding:0;margin-bottom:10px}
.lg-bons{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px}
.lg-b{position:relative;cursor:pointer;min-height:104px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,background-color .15s}
.lg-b input{position:absolute;opacity:0;pointer-events:none}
.lg-b:has(input:checked){box-shadow:inset 0 0 0 2px var(--flare)}
.lg-b:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:2px}
.lg-rd{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(243,240,235,.5);background:rgba(12,12,12,.35)}
.lg-b:has(input:checked) .lg-rd{box-shadow:inset 0 0 0 5px var(--flare);background:var(--soot)}
.lg-b.bn{padding:14px 16px;gap:0;justify-content:flex-end;min-width:0}
.lg-b.bn>img{right:-26%;height:150%;top:34%}
.lg-b.bn .bn-v{font-size:28px}
.lg-b.bn .bn-v small{margin-top:6px;font-size:11px}
.lg-b.bn .bn-k{font-size:10px}
.lg-none{display:grid;align-content:end;gap:8px;padding:14px 16px;background:var(--char)}
.lg-none:hover{background:var(--char-2)}
.lg-ni{color:var(--ash);line-height:0}
.lg-nt{display:grid;gap:2px}
.lg-nt b{font-size:14px;font-weight:600}
.lg-nt small{font-size:12px;line-height:1.35;color:var(--ash)}
.lg-b.bn:not(:has(input:checked))>img{opacity:.55;filter:saturate(.6)}
.lg-b.bn:not(:has(input:checked)){background:linear-gradient(154deg,#000 0%,#3a0a03 60%,#6b3a06 110%)}
.lg-forgot{font-size:12px}
.lg .hint.is-ok{color:var(--ok)}
.lg-pc-t{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;width:fit-content;font-size:14px;font-weight:500;color:var(--bone-2);border-radius:var(--r-s)}
.lg-pc-t:hover{color:var(--bone)}
.lg-pc-t svg:last-child{transition:rotate .2s;color:var(--ash)}
.lg-pc-t[aria-expanded="true"] svg:last-child{rotate:180deg}
.lg-pc-t:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.lg-su{gap:4px}
.lg-su .field{gap:6px}
.lg-su .check{padding:10px 0;font-size:13px}
.lg .field.err .check input{box-shadow:inset 0 0 0 1.5px var(--fail)}
.lg .social .btn{height:48px}
@media (max-width:767px){
  dialog.dlg.lg{width:100%;height:fit-content}  /* hug the content: the shared sheet rule sets height:auto, which stretches a modal dialog to max-height */
  .lg .dlg-h{padding-top:2px}
  .lg .dlg-h h2{font-size:17px}
  .lg .dlg-b{gap:14px;padding-top:14px}
  .lg .dlg-f{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))}
  .lg-bons{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .lg-b{min-height:96px}
  .lg-b.bn{padding:12px 14px}
  .lg-b.bn .bn-v{font-size:24px}
  .lg-b.bn .bn-v small{font-size:10px}
  .lg-none{padding:12px 14px}
  .lg-nt small{font-size:11px}
  .lg-bon>legend small{display:none}
}

/* bonuses: welcome pack = step-1 banner + two locked steps (Pinco: one big offer, a huge number, a clear CTA) */
.wp{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:stretch}
.wp-1{min-height:260px;padding:32px 36px;justify-content:flex-end;gap:14px}
.bn.wp-1>img{right:-4%;height:160%}
.wp-1 .bn-v{font-size:clamp(48px,5vw,72px)}
.wp-1 .bn-v small{font-size:13px;margin-top:10px}
.wp-1 .bn-cta{margin-top:6px;min-width:180px;height:48px;font-size:15px}
.wp-tags{display:flex;flex-wrap:wrap;gap:6px}
.wp-tags .tag{background:rgba(12,12,12,.4);color:var(--bone)}
.wp-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;gap:12px}
.wp-rest .wstep{padding:22px;align-content:space-between;gap:10px}
.wp-rest .ws-v{font-size:clamp(30px,3vw,42px)}
.wp-rest .ws-cap{font-size:14px}
.wp-note{grid-column:1/-1;padding:14px 18px;border-radius:var(--r-m);background:var(--char);font-size:13px;line-height:1.45;color:var(--ash)}
.row-h .wp-tl{gap:10px}
.row-h .wp-tl>span:first-child{font-size:10px}
/* offer art: object on the brand gradient (.hero), a photo (default) or the photo flipped (.alt) */
.of-art.hero{background:var(--heat)}
.of-art.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,12,12,.45),rgba(12,12,12,0) 60%)}
.of-art.hero img{inset:auto;top:50%;right:-4%;width:auto;height:170%;aspect-ratio:1;translate:0 -50%;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.of-art.hero.flip img{right:auto;left:38%;scale:-1 1;-webkit-mask-image:linear-gradient(270deg,transparent,#000 40%);mask-image:linear-gradient(270deg,transparent,#000 40%)}
.of-art.alt img{scale:-1 1;object-position:30% 30%}
a.offer:hover .of-art.hero img{transform:none}
.of-art .of-v{position:relative}
@media (max-width:1100px){
  .wp{grid-template-columns:minmax(0,1fr)}
  .wp-1{min-height:220px}
}
@media (max-width:767px){
  .row-h .wp-tl{display:none}
  .wp{gap:8px}
  .wp-1{min-height:236px;padding:20px;gap:10px;border-radius:22px}
  .wp-1{min-height:250px}
  .bn.wp-1>img{right:-18%;top:-10%;height:72%;translate:none;-webkit-mask-image:none;mask-image:none}
  .wp-1 .bn-k{font-size:10px}
  .wp-1 .wp-tags{display:none}  /* the same terms are in .wp-note under the steps */
  .wp-1::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(12,12,12,.55),rgba(12,12,12,0) 55%)}
  .wp-1 .bn-v{font-size:46px}
  .wp-1 .bn-cta{width:100%;min-width:0;height:48px}
  .wp-rest{gap:8px}
  .wp-rest .wstep{width:auto;max-width:none;padding:16px;border-radius:22px}
  .wp-rest .ws-v{font-size:28px}
  .wp-rest .ws-k{font-size:10px}
  .wp-rest .ws-cap{font-size:13px}
  .wp-note{padding:12px 14px;font-size:12px;border-radius:18px}
  .of-art.hero img{height:150%}
  .offers .of-art{min-height:112px}
}
/* promotions: one featured banner, then the filter and the card grid (Stake) */
.pr-feat{min-height:240px;padding:32px 40px;justify-content:flex-end}
.bn.pr-feat>img{right:4%;height:170%}
.pr-feat .bn-v{font-size:clamp(40px,4.4vw,64px)}
.pr-feat .bn-v small{font-size:13px;margin-top:10px;max-width:40ch}
@media (max-width:767px){
  .pr-feat{min-height:208px;padding:20px}
  .bn.pr-feat>img{right:-22%;top:44%;height:112%}
  .pr-feat .bn-v{font-size:40px;line-height:.92}
  .pr-feat .bn-v small{display:none}
  .pr-cats .pick,#bn-av .pick{height:44px;padding:0 16px}
  .pr-cats.picks.lane-x{margin-inline:-16px;padding:2px 16px}
}
/* promo detail: the H1 follows the shared title size; the offer number is the peak of the hero (Core, soft glow) */
[data-page="promo-one"] .p-hero .t-h{font-size:var(--h1);line-height:1.05}
.p-hero .po-v{font-size:clamp(48px,5.4vw,80px);margin:4px 0 2px}
.p-hero .po-v small{font-size:13px}
.btn.pone-go{display:none}
@media (max-width:1100px){.btn.pone-go{display:flex}}
@media (max-width:767px){
  .p-hero .po-v{font-size:44px}
  [data-page="promo-one"] .p-hero .cta{flex-wrap:wrap}
  [data-page="promo-one"] .p-hero .cta .btn{flex:1 1 auto;height:48px}
}
/* VIP: progress hero, tier ladder (4 compact cards), benefits table, cashback banner */
.vp-go{margin-top:4px;gap:12px 16px}
.vp-go .muted{font-size:13px}
.vp-lv{list-style:none;margin:0;padding:0}
.vp-lv .vl{gap:10px;padding:20px 22px}
.vp-lv .vl-sum b{font-size:20px}
.vp-lv .prog{margin-top:2px}
.vtbl-wrap{border-radius:var(--r-l);background:var(--char);overflow:hidden}
.vtbl{width:100%;border-collapse:collapse;table-layout:fixed}
.vtbl th,.vtbl td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.vtbl tbody tr:last-child>*{border-bottom:0}
.vtbl thead th{padding-block:16px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.vtbl thead th:first-child,.vtbl tbody th{text-align:left;padding-left:24px}
.vtbl thead th:first-child{width:44%}
.vtbl thead th.is-now{color:var(--bone)}
.vtbl thead th.top{color:var(--bone)}
.vtbl .is-now{background:rgba(255,153,0,.05)}
.vtbl thead th.is-now{box-shadow:inset 0 2px 0 var(--flare)}
.vtbl tbody th{font-weight:400}
.vtbl tbody th b{display:block;font-size:14px;font-weight:600;color:var(--bone)}
.vtbl tbody th small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--ash)}
.vtbl td{font-size:0;color:transparent}
.vtbl td::before{content:"";display:inline-block;vertical-align:middle}
.vtbl td[data-y]::before{width:18px;height:18px;background:var(--bone);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat}
.vtbl td[data-new]::before{background:var(--flare)}
.vtbl td[data-n]::before{width:10px;height:1.5px;background:var(--line-3)}
.vp-note{font-size:13px}
.vp-cb{min-height:200px;padding:32px 40px;justify-content:flex-end;--bn-pos:78% 50%}
.vp-cb .bn-v{font-size:clamp(48px,5vw,72px)}
.vp-cb.bn.card{background:linear-gradient(90deg,var(--soot-2) 35%,#3a0a03)}
.vp-cb.bn.card>img{inset:0 0 0 auto;width:56%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%);--bn-pos:50% 45%}
.vp-cb.bn.card::before{background:linear-gradient(90deg,rgba(12,12,12,.6) 30%,rgba(12,12,12,0) 70%)}
.vp-cb .bn-v small{font-size:13px;max-width:36ch}
.vp-faq{width:fit-content}
@media (max-width:1100px){.vp-lv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .vp-go .btn{width:100%}
  .vp-lv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;overflow:visible}
  .vp-lv .vl{width:auto;max-width:none;padding:16px;border-radius:22px;gap:8px}
  .vp-lv .vl h3{font-size:15px}
  .vp-lv .vl-sum b{font-size:16px}
  .vp-lv .vl-h .tag{height:20px;padding:0 7px;font-size:10px}
  .vtbl-wrap{border-radius:22px}
  .vtbl th,.vtbl td{padding:12px 4px}
  .vtbl thead th{font-size:9px;letter-spacing:.02em;padding-block:14px}
  .vtbl thead th:first-child,.vtbl tbody th{padding-left:14px}
  .vtbl thead th:first-child{width:auto}
  .vtbl thead th:not(:first-child){width:52px}
  .vtbl tbody th b{font-size:13px}
  .vtbl tbody th small{font-size:11px}
  .vtbl td[data-y]::before{width:16px;height:16px}
  .vp-cb{min-height:200px;padding:20px;--bn-pos:70% 30%}
  .vp-cb .bn-v{font-size:44px}
  .vp-cb .bn-v small{font-size:11px;max-width:22ch}
  .vp-faq{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .vp-faq>button{height:40px}
}
@media (max-width:380px){.vtbl thead th:not(:first-child){width:46px}.vtbl thead th{font-size:8px}}

/* ---------- 31. SHELL + DIALOGS v2 (app.js: search, notifications, menu, profile, currency, language, footer) ---------- */
/* Shared count badge (unread, bonuses). Flare = the "new" marker, same as the bell dot. */
.nb,.nt-ct{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--flare);color:var(--soot);font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}

/* ----- search (Stake): input on top, category chips, idle state = recent + popular + providers, instant results ----- */
dialog.dlg.search-dlg{height:fit-content}
.sr-top{flex:none;display:flex;align-items:center;gap:10px;padding:20px 20px 0 24px}
.sr-ctl{flex:1;min-width:0;height:52px;padding:0 8px 0 18px;border-radius:var(--r-pill)}
.sr-ctl input{font-size:16px}
.sr-ctl input::-webkit-search-cancel-button{display:none}
.sr-ctl .sr-clr{margin-right:0}
.sr-kbd{flex:none;height:26px;padding:0 9px;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--char-2);font-family:var(--mono);font-size:11px;color:var(--ash)}
.sr-cancel{display:none}
.sr-cats{flex:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:14px 24px 2px}
.sr-cats::-webkit-scrollbar{display:none}
.sr-cats .pick{flex:none;height:36px;padding:0 14px}
.sr-cats .pick svg{color:var(--ash)}
.sr-cats .pick[aria-pressed="true"] svg{color:inherit}
.sr-b{padding-top:18px;gap:28px}
.sr-idle{display:grid;gap:28px}
.sr-sec{display:grid;gap:12px;min-width:0}
.sr-h{display:flex;align-items:center;gap:8px;min-height:32px}
.sr-h h3{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:0}
.sr-h h3 svg{color:var(--ash)}
.sr-h .btn{margin-left:auto}
.sr-h .mono{font-size:12px}
.sr-h .mono b{color:var(--bone);font-weight:500}
.sr-recs{display:flex;flex-wrap:wrap;gap:6px}
.sr-rc{display:inline-flex;align-items:center;height:36px;border-radius:var(--r-pill);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);max-width:100%}
.sr-rc-t{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:100%;min-width:0;padding:0 2px 0 12px;font-size:13px;font-weight:500;color:var(--bone);border-radius:var(--r-pill)}
.sr-rc-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-rc-t svg{color:var(--ash)}
.sr-rc-x{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:34px;height:100%;display:grid;place-items:center;color:var(--ash);border-radius:var(--r-pill)}
.sr-rc-x:hover{color:var(--bone)}
.sr-rc-t:focus-visible,.sr-rc-x:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.sr-pvs .pick{height:36px}
@media (min-width:768px){.sr-idle .sr-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sr-grid mark{background:rgba(243,240,235,.2);color:inherit;border-radius:2px;padding:0 1px}
.sr-empty{padding:32px 16px}
.sr-empty .picks{justify-content:center;margin-top:6px}
.sr-empty .pick{height:36px}

/* ----- notifications: tabs with unread counts, day groups, unread marker, one promo as a small .bn ----- */
.ntf-pop .dlg-h h2{flex:1}
.ntf-pop .nt-all{padding:0 10px;font-size:12px}
.nt-tabs{flex:none;padding:14px 16px 0}
.nt-tabs .seg>button{gap:6px}
.nt-ct{min-width:18px;height:18px;padding:0 5px;font-size:10px;background:var(--char-3);color:var(--bone)}
.nt-tabs [aria-selected="true"] .nt-ct{background:var(--soot);color:var(--bone)}
.nt-b{padding:6px 8px 10px;gap:6px}
.nt-day{display:grid;gap:2px}
.nt-day>h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--ash);padding:10px 12px 4px}
.ntf .n-t{min-width:0}
.ntf .n-t p b{display:inline;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--bone)}
.ntf.unread:not(.ntf-bn){background:rgba(243,240,235,.03)}
.ntf.unread .n-ic{box-shadow:none;color:var(--bone)}
.ntf.unread .n-t>b::after,.ntf-bn.unread .nt-meta time::before{content:"";display:inline-block;width:7px;height:7px;margin:0 0 1px 8px;border-radius:50%;background:var(--flare);vertical-align:middle}
.ntf-bn.unread .nt-meta time::before{margin:0 8px 1px 0}
.ntf:not(.unread) .n-t>b{font-weight:500;color:var(--bone-2)}
.ntf.ok .n-ic{background:var(--ok-bg);color:var(--ok)}
.ntf.pend .n-ic{background:var(--pend-bg);color:var(--pend)}
.ntf.fail .n-ic{background:var(--fail-bg);color:var(--fail)}
.n-go{position:absolute;inset:0;z-index:0;border-radius:inherit}
.n-go:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.ntf .x{position:relative;z-index:1}
@media (hover:hover){.ntf .x{opacity:0;transition:opacity .15s}.ntf:hover .x,.ntf:focus-within .x{opacity:1}}
.ntf-bn{grid-template-columns:minmax(0,1fr);gap:4px;padding:4px 4px 6px}
.ntf-bn:hover{background:transparent}
.nt-bn{min-height:112px;padding:16px 18px;gap:0;justify-content:center;border-radius:var(--r-m)}
.nt-bn.hero>img{right:-8%;height:175%}
.nt-bn .bn-v{font-size:28px}
.nt-bn .bn-v small{margin-top:6px;font-size:11px}
.nt-bn .bn-k{font-size:10px}
.nt-bn .bn-cta{position:absolute;right:14px;bottom:14px;margin:0}
.nt-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 0 8px}
.nt-meta time{font-family:var(--mono);font-size:11px;color:var(--ash)}
.nt-empty{padding:40px 16px}
.nt-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 12px}
.nt-f .btn{padding:0 10px;font-size:12px}

/* ----- currency + language: symbol or code badge, name, secondary line, value, radio ----- */
@media (min-width:768px){dialog.dlg.pop.cur-pop{width:340px}dialog.dlg.pop.pm-pop{width:320px}}
.opt-list .radio-row{min-height:56px;gap:12px;padding:0 14px 0 10px}
.opt-list .radio-row::after{margin-left:4px!important}
.opt-list .radio-row[aria-checked="true"]{background:var(--char)}
.ol-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone);font-size:12px;letter-spacing:0}
.opt-list .radio-row[aria-checked="true"] .ol-ic{background:var(--char-3)}
.ol-t{flex:1;min-width:0;display:grid;gap:1px}
.ol-t b{font-size:14px;font-weight:600;line-height:1.3}
.ol-t small{font-family:var(--mono);font-size:11px;color:var(--ash)}
.ol-v{font-size:12px;color:var(--bone)}
.ol-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 12px 2px;font-size:12px;line-height:1.45;color:var(--ash)}
.ol-note svg{margin-top:1px}

/* ----- profile menu: identity, balance with actions, VIP progress, account links ----- */
.pm-b{padding:16px 12px 12px;gap:12px}
.pm-who{display:flex;align-items:center;gap:12px;padding:0 4px}
.pm-who .avatar{cursor:default;width:48px;height:48px;font-size:14px}
.pm-n{display:grid;gap:0;min-width:0}
.pm-n>b{font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-id{display:inline-flex;align-items:center;gap:2px;font-size:11px}
.pm-id .icon-btn{width:28px;height:28px;background:transparent;color:var(--ash)}
.pm-id .icon-btn:hover{color:var(--bone);background:var(--char)}
.pm-bal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;padding:14px;border-radius:var(--r-m);background:var(--char)}
.pm-bv,.mn-bv{display:grid;gap:2px;min-width:0}
.pm-bv>span,.mn-bv>span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.pm-bv>b,.mn-bv>b{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-ba{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pm-ba .btn:not(.bone),.mn-bal .btn:not(.hot),.mn-sa .btn{background:var(--char-2)}
.pm-ba .btn:not(.bone):hover,.mn-bal .btn:not(.hot):hover,.mn-sa .btn:hover{background:var(--char-3)}
.pm-vip{display:grid;gap:10px;padding:12px 14px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);color:var(--bone);text-decoration:none;transition:background-color .15s}
.pm-vip:hover{background:var(--char)}
.pm-vip:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.pm-vt{display:flex;align-items:center;gap:8px;font-size:13px}
.pm-vt>svg{color:var(--ash)}
.pm-vt b{font-weight:600}
.pm-vt .mono{margin-left:auto}
.mlist .end .st{height:22px;padding:0 8px;font-family:var(--body);font-size:11px}

/* ----- site menu (bottom-nav Menu): account + wallet, search, quick tiles, promo, groups, folds, settings, support ----- */
.mn-b{gap:16px}
.mn-acc{display:grid;gap:12px;padding:12px 14px 14px;border-radius:var(--r-m);background:var(--char)}
.mn-who{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--bone);text-decoration:none;border-radius:var(--r-s)}
.mn-who:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.mn-who .avatar{cursor:inherit}
.mn-who>svg{color:var(--ash)}
.mn-wt{flex:1;min-width:0;display:grid;gap:1px}
.mn-wt b{font-size:15px;font-weight:600;line-height:1.3}
.mn-bal{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.mn-bv{flex:1}
.mn-bv>b{font-size:17px}
.mn-bal .btn{height:40px;padding:0 14px}
.mn-search{flex:none;width:100%;height:48px}
.mn-tiles a{min-height:72px;align-content:center}
.mn-tiles a[aria-current]{background:var(--char-2)}
.mn-tiles svg{color:var(--ash)}
.mn-bn{min-height:112px;padding:16px 18px;gap:0;justify-content:center;border-radius:var(--r-m)}
.mn-bn .bn-v{font-size:30px}
.mn-bn .bn-v small{margin-top:6px;font-size:11px}
.mn-bn .bn-k{font-size:10px}
.mn-bn .bn-cta{position:absolute;right:14px;bottom:14px;margin:0}
.mn-bn.card{background:linear-gradient(90deg,var(--soot-2) 30%,#3a0a03)}
.mn-bn.card>img{inset:0 0 0 auto;width:66%;--bn-pos:50% 45%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
.mn-bn.card::before{background:linear-gradient(90deg,rgba(12,12,12,.55) 25%,rgba(12,12,12,0) 70%)}
.mn .mgroup>h3{padding-top:4px}
.mn-fold>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-m);font-size:14px;font-weight:500;color:var(--bone);cursor:pointer;transition:background-color .15s}
.mn-fold>summary::-webkit-details-marker{display:none}
.mn-fold>summary:hover{background:var(--char)}
.mn-fold>summary:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.mn-fold>summary svg{color:var(--ash)}
.mn-fold>summary svg:last-child{margin-left:auto;transition:rotate .2s}
.mn-fold[open]>summary svg:last-child{rotate:180deg}
.mn-fold>.mlist{margin:2px 0 6px 21px;padding-left:8px;border-left:1px solid var(--line)}
.mn-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mn-set button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:0 10px 0 14px;border-radius:var(--r-m);background:var(--char);transition:background-color .15s}
.mn-set button:hover{background:var(--char-2)}
.mn-set button:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.mn-set svg{color:var(--ash)}
.mn-set span{flex:1;min-width:0;display:grid}
.mn-set small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.mn-set b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-sup{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-radius:var(--r-m);background:var(--char)}
.mn-st{display:grid;gap:2px;min-width:0}
.mn-st b{font-size:14px;font-weight:600}
.mn-st small{font-size:12px;color:var(--ash)}
.mn-sa{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mn-sa .btn{height:44px}
.mn-end{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 4px}
.btn.mn-out{height:44px;padding:0 12px;margin-left:-4px;color:var(--fail)}
.btn.mn-out:hover{background:var(--fail-bg);color:var(--fail)}

/* ----- shell: bottom nav while the menu is open, invisible 44px hit areas in the mobile header ----- */
.bnav:has([aria-expanded="true"]) [aria-current]{color:var(--ash)}
.bnav:has([aria-expanded="true"]) [aria-current] svg{color:inherit}

/* ----- footer: brand + app/Telegram, link columns, payment strip, compliance block ----- */
.foot-app{display:flex;flex-wrap:wrap;gap:8px}
.foot-pay{display:grid;gap:12px}
.foot-k{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--ash)}
.foot-pays{display:flex;flex-wrap:wrap;gap:8px}
.foot-lic{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;padding-top:24px;border-top:1px solid var(--line)}
.foot-seals{display:flex;align-items:center;gap:8px}
.foot-seal{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 14px 0 10px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-3);font-family:var(--mono);font-size:11px;font-weight:500;color:var(--bone)}
.foot-seal svg{color:var(--ash)}
.foot-lt{display:grid;gap:8px;max-width:110ch;font-size:12px;line-height:1.6;color:var(--ash)}
.foot-lt a{color:var(--bone-2);text-underline-offset:3px}
.foot-lt a:hover{color:var(--bone)}
.foot-ph{color:rgba(156,149,146,.72)}
.foot-bot a{color:var(--ash);text-decoration:none}
.foot-bot a:hover{color:var(--bone)}

@media (max-width:767px){
  /* header: 44px hit areas without changing how the header looks */
  .nav-search::after,.wallet .dep::after{content:"";position:absolute;inset:-4px}
  .wallet .dep{position:relative;overflow:visible}
  /* search: full-screen sheet, input pinned on top, Cancel on the right (iOS/Stake) */
  dialog.dlg.search-dlg{height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:env(safe-area-inset-top,0px) 0 0}
  .sr-top{padding:10px 6px 0 16px;gap:2px}
  .sr-ctl{height:48px;padding:0 6px 0 16px}
  .sr-top .x,.sr-kbd{display:none}
  .sr-cancel{display:inline-flex;height:44px;padding:0 10px;color:var(--bone);font-size:15px;font-weight:500}
  .sr-cats{padding:12px 16px 4px}
  .sr-cats .pick{height:40px}
  .sr-b{padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));gap:24px}
  .sr-idle{gap:24px}
  .sr-rc,.sr-pvs .pick,.sr-empty .pick{height:40px}
  .sr-h .btn.sm{height:36px}
  /* notifications */
  .ntf-pop .dlg-h{padding-right:12px}
  .nt-tabs{padding:12px 16px 0}
  .nt-tabs .seg>button{height:36px}
  .nt-b{padding:6px 8px 10px}
  .ntf .x{width:36px;height:36px;margin:-4px -4px 0 0}
  .nt-f{padding:8px 12px 10px}
  .nt-f .btn,.ntf-pop .nt-all{height:40px}
  /* currency, language */
  .opt-list .radio-row{min-height:60px}
  /* profile */
  .pm-b{padding:6px 16px 16px}
  .pm-ba .btn{height:44px}
  /* menu */
  .mn-b{padding-top:14px}
  .mn-bal .btn{height:44px}
  /* footer */
  .foot-app .btn{height:40px}
  .foot-lic{grid-template-columns:minmax(0,1fr);gap:14px}
  .foot-col{gap:0}
  .foot-col h2{margin-bottom:2px}
  .foot-col a{min-height:44px;display:flex;align-items:center}
  .foot-top{row-gap:20px}
  .paylogo{height:32px;min-width:0;padding:0 10px;font-size:10px}
  .foot-pays{gap:6px}
}
@media (max-width:380px){
  .mn-bal{flex-wrap:wrap}
  .mn-bv{flex-basis:100%}
  .mn-bal .btn{flex:1}
  .nt-f .btn{font-size:11px;padding:0 8px}
}

/* ---------- 30. ACCOUNT PAGES v2 (profile.html, history.html, transactions.html) ----------
   Every rule is scoped to main.ax (only these three pages carry it), so the lobby and other pages are untouched.
   .ax-id identity strip · .ax-tabs icon tabs · .ax-2col data | side · .ax-vf verification · .ax-lims limit cards
   .ax-sw switch list · .ax-sum summary strip · .ax-bar filter bar · .tbl.ax-t compact mobile cards · .ax-vip / .ax-nudge banners */

/* header: title with account links on the right */
main.ax .ax-links .btn svg{color:var(--ash)}

/* identity strip (1win): who + balances */
main.ax .ax-id{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px;padding:20px 24px;background:radial-gradient(90% 180% at 0% 0%,rgba(142,21,4,.16),transparent 60%),var(--char)}
main.ax .ax-who{display:flex;align-items:center;gap:18px;min-width:0}
main.ax .ax-who .avatar{cursor:default;width:72px;height:72px;font-size:18px;background:var(--char-2);box-shadow:inset 0 0 0 1px var(--line-2)}
main.ax .ax-who-t{display:grid;gap:8px;min-width:0;justify-items:start}
main.ax .ax-name{font-size:20px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
main.ax .ax-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
main.ax button.st{appearance:none;border:0;margin:0;font-family:var(--body);cursor:pointer;transition:filter .15s}
main.ax button.st:hover{filter:brightness(1.2)}
main.ax button.st:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
main.ax .who-id{flex-wrap:wrap;row-gap:2px}
main.ax .who-id b{white-space:nowrap}
main.ax .who-id .ax-since{margin-left:6px;padding-left:12px;border-left:1px solid var(--line-2)}
main.ax .ax-bal{display:flex;align-items:center}
main.ax .ax-bv{display:grid;gap:4px;padding:0 24px;border-left:1px solid var(--line)}
main.ax .ax-bv .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
main.ax .ax-bv b{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
main.ax .ax-bv+.ax-bv b{color:var(--bone-2)}
main.ax .ax-bact{display:flex;gap:8px;padding-left:24px;border-left:1px solid var(--line)}

/* tabs with icons; the current icon turns Flare, like the catalog bar */
main.ax .ax-tabs-wrap{gap:24px}
main.ax .ax-tabs{gap:28px}
main.ax .ax-tabs>button svg{opacity:.75;transition:color .15s,opacity .15s}
main.ax .ax-tabs>[aria-selected="true"] svg{color:var(--flare);opacity:1}

/* two columns: content | 360 px side (General); .eq = two equal columns (Security, Settings) */
main.ax .ax-2col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
main.ax .ax-2col.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
main.ax .ax-gen{grid-template-areas:"m v" "m s";grid-template-rows:auto 1fr}
main.ax .ax-gen>.ax-main{grid-area:m}
main.ax .ax-gen>.ax-gvf{grid-area:v}
main.ax .ax-gen>.ax-side{grid-area:s}
main.ax .ax-mono input{font-family:var(--mono);font-size:14px}
main.ax .ax-save{display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
main.ax .ax-save .sp{flex:1}
main.ax .ax-card .panel-h{align-items:flex-start}
main.ax .ax-card .panel-h .btn.quiet{margin:-4px -8px 0 0}
main.ax .ax-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
main.ax .ax-card .kv dd.mono{font-size:12px}
main.ax .ax-go{justify-self:start}
main.ax .ax-go svg{color:var(--ash)}

/* VIP nudge in the General side column (dice on the brand gradient). 216 desktop / 184 mobile */
main.ax .ax-vip{min-height:216px;justify-content:flex-end;gap:10px;padding:22px 24px}
main.ax .ax-vip.hero>img{height:112%;right:-32%;top:44%}
main.ax .ax-vip .bn-v{font-size:36px}
main.ax .ax-vip-bar{width:min(100%,200px);background:rgba(12,12,12,.5)}
main.ax .ax-vip-bar>i{background:var(--bone)}
main.ax .ax-vip .bn-p{max-width:17ch;font-family:var(--mono);font-size:12px;line-height:1.5}

/* verification (Pinco): sticky step list | current step */
main.ax .ax-vf{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
main.ax .ax-vf-nav{position:sticky;top:calc(var(--hdr-h) + 16px)}
main.ax .ax-vf-nav .steps{grid-auto-flow:row;gap:0}
main.ax .ax-vf-nav .step{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding-bottom:18px}
main.ax .ax-vf-nav .step:last-child{padding-bottom:0}
main.ax .ax-vf-nav .step::before{top:36px;bottom:2px;left:15px;right:auto;width:1.5px;height:auto}
main.ax .ax-safe{display:flex;align-items:flex-start;gap:10px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ash)}
main.ax .ax-safe svg{flex:none;margin-top:1px}
main.ax .ax-vf-main{display:grid;gap:16px;min-width:0}
main.ax .ax-vf-main .panel>.field,main.ax .ax-vf-main .panel>.stack{max-width:560px}
main.ax .ax-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
main.ax .ax-foot{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
main.ax .ax-foot .sp{flex:1}
main.ax .ax-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:16px;align-items:start}
main.ax .drop small u{color:var(--flare);text-decoration:none}

/* responsible gaming: limit cards, current usage on a sunk plate, the form at the bottom */
main.ax .ax-lims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
main.ax .ax-lims>.panel{display:flex;flex-direction:column;gap:16px}
main.ax .ax-lims .lim-wrap{margin-top:auto}
main.ax .ax-use,main.ax .ax-none{padding:14px 16px;border-radius:var(--r-m);background:rgba(12,12,12,.42)}
main.ax .ax-use{padding-bottom:6px}
main.ax .ax-rm{justify-self:start;margin-left:-12px}
main.ax .ax-excl{box-shadow:inset 0 0 0 1px rgba(255,92,92,.28)}

/* settings rows: text left, switch right (Stake) */
main.ax .ax-sw{list-style:none;margin:0;padding:0;display:grid}
main.ax .ax-sw li{border-top:1px solid var(--line)}
main.ax .ax-sw li:first-child{border-top:0}
main.ax .ax-sw .switch{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:52px;padding:8px 0}
main.ax .ax-sw .switch>span{display:grid;gap:2px;min-width:0}
main.ax .ax-sw .switch b{font-size:14px;font-weight:500}
main.ax .ax-sw .switch small{font-size:12px;line-height:1.4;color:var(--ash)}
main.ax .ax-sw .switch:has(input:disabled){cursor:default}
main.ax .ax-sw .switch input:disabled{opacity:.55}
main.ax .ax-kv dd .btn svg{color:var(--ash)}

/* summary strip: one surface, four figures (history, transactions) */
main.ax .ax-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-l);background:var(--char);overflow:hidden}
main.ax .ax-sum .stat{border-radius:0;background:transparent;padding:20px 24px;border-left:1px solid var(--line)}
main.ax .ax-sum .stat:first-child{border-left:0}
main.ax .ax-sum .stat .v{font-size:22px}
main.ax .ax-sum .stat.peak{background:radial-gradient(100% 140% at 100% 0%,rgba(255,241,214,.12),rgba(255,153,0,.06) 45%,transparent 80%);box-shadow:none}

/* filter bar: result or type segment, period select, count, reset */
main.ax .ax-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
main.ax .ax-bar .seg>button{height:32px}
main.ax .ax-bar .ctl.sel.sm{width:200px;gap:8px}
main.ax .ax-bar .ctl svg{flex:none;color:var(--ash)}
main.ax .ax-bar .sp{flex:1}
main.ax .ax-cnt{font-family:var(--mono);font-size:12px;color:var(--ash);white-space:nowrap}
main.ax .ax-t td.c-d{white-space:nowrap}
main.ax .ax-t .ax-odd{margin-left:6px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ash)}
main.ax .ax-t td.c-a{width:1%;white-space:nowrap}
main.ax .ax-t .c-b .ax-idc{display:inline-flex;align-items:center;gap:4px}

/* transactions: deposit-bonus strip under the list (reuses .bn.strip) */
main.ax .ax-nudge.hero>img{right:8%;height:240%;top:62%}

@media (max-width:1100px){
  main.ax .ax-id{grid-template-columns:minmax(0,1fr)}
  main.ax .ax-bal{padding-top:16px;border-top:1px solid var(--line)}
  main.ax .ax-bv:first-child{padding-left:0;border-left:0}
  main.ax .ax-bact{margin-left:auto}
  main.ax .ax-2col{grid-template-columns:minmax(0,1fr)}
  main.ax .ax-gen{grid-template-areas:"v" "m" "s";grid-template-rows:none}
  main.ax .ax-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.ax .ax-side .ax-vip{min-height:184px}
  main.ax .ax-vf{grid-template-columns:minmax(0,1fr)}
  main.ax .ax-vf-nav{position:static}
  main.ax .ax-vf-nav .steps{grid-auto-flow:column}
  main.ax .ax-vf-nav .step{grid-template-columns:none;padding-bottom:0}
  main.ax .ax-vf-nav .step::before{top:16px;bottom:auto;left:40px;right:0;width:auto;height:1.5px}
  main.ax .ax-lims{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  main.ax .ax-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.ax .ax-sum .stat:nth-child(3){border-left:0}
  main.ax .ax-sum .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:767px){
  /* identity: stacked, balances side by side, actions full width */
  main.ax .ax-id{padding:18px;gap:16px}
  main.ax .ax-who{gap:14px}
  main.ax .ax-who .avatar{width:56px;height:56px;font-size:15px}
  main.ax .ax-name{font-size:18px}
  main.ax .who-id .ax-since{flex-basis:100%;margin:0;padding:0;border:0}
  main.ax .ax-bal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  main.ax .ax-bv{padding:0 0 0 16px}
  main.ax .ax-bv b{font-size:18px}
  main.ax .ax-bact{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;border:0}
  /* tabs bleed to the screen edges and scroll; a fade tells that there is more */
  main.ax .ax-tabs{gap:22px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  main.ax .ax-tabs>button{height:48px}
  main.ax .ax-tabs-wrap{gap:20px}
  main.ax .ax-2col.eq,main.ax .ax-side,main.ax .ax-lims,main.ax .ax-up{grid-template-columns:minmax(0,1fr)}
  main.ax .ax-fr{grid-template-columns:minmax(0,1fr)}
  main.ax .ax-vip{min-height:184px;padding:18px}
  main.ax .ax-vip.hero>img{height:130%;right:-34%}
  main.ax .ax-vip .bn-v{font-size:30px}
  /* verification: compact horizontal steps, labels under the dots */
  main.ax .ax-vf-nav .steps{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
  main.ax .ax-vf-nav .step{grid-template-columns:none;justify-items:center;text-align:center;gap:8px;padding:0}
  main.ax .ax-vf-nav .step .dot{grid-row:auto}
  main.ax .ax-vf-nav .step::before{top:16px;bottom:auto;left:calc(50% + 22px);right:calc(-50% + 22px);width:auto;height:1.5px}
  main.ax .ax-vf-nav .step b{font-size:12px}
  main.ax .ax-vf-nav .step small{font-size:11px;line-height:1.3}
  main.ax .ax-foot .btn{flex:1}
  main.ax .ax-foot .sp{display:none}
  main.ax .ax-foot .btn.ghost{flex:0 0 auto}
  /* tap targets: 44 px on phones */
  main.ax .btn,main.ax .btn.sm{height:44px}
  main.ax .icon-btn,main.ax .icon-btn.sm{width:44px;height:44px}
  main.ax .ctl:has(>.btn){height:56px;padding-right:14px}
  main.ax .ctl>.btn{margin-right:-6px}
  main.ax .ctl.sm{height:44px}
  main.ax .link{display:inline-flex;align-items:center;min-height:44px}
  main.ax .note .link,main.ax .panel-h p .link,main.ax .ax-safe .link{display:inline;min-height:0}
  main.ax .ax-lims .ax-rm{margin-left:-12px}
  /* summary strip */
  main.ax .ax-sum .stat{padding:14px 16px;gap:4px}
  main.ax .ax-sum .stat .v{font-size:18px}
  main.ax .ax-sum .stat .k{font-size:10px}
  /* filter bar: segment full width, then select + reset */
  main.ax .ax-bar{gap:8px}
  main.ax .ax-bar .seg{flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:3px}
  main.ax .ax-bar .seg>button{height:44px;padding:0 6px}
  main.ax .ax-bar .ctl.sel.sm{flex:1 1 0;width:auto;min-width:0}
  main.ax .ax-bar .sp,main.ax .ax-bar .ax-cnt{display:none}
  /* compact cards: title | amount, title | status, meta | date, action */
  main.ax .tbl.cards.ax-t tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t w" "t s" "b d" "a a";gap:4px 12px;padding:16px 18px}
  main.ax .tbl.cards.ax-t td.c-title{grid-area:t;align-self:start}
  main.ax .tbl.cards.ax-t td.c-end{grid-area:w;align-self:start;font-size:14px}
  main.ax .tbl.cards.ax-t td.c-st{grid-area:s;justify-content:flex-end;align-self:start}
  main.ax .tbl.cards.ax-t td.c-st::before{display:none}
  main.ax .tbl.cards.ax-t td.c-b,main.ax .tbl.cards.ax-t td.c-d{margin-top:10px;padding-top:10px!important;border-top:1px solid var(--line);font-size:12px}
  main.ax .tbl.cards.ax-t td.c-b{grid-area:b;justify-content:flex-start;gap:6px;min-width:0}
  main.ax .tbl.cards.ax-t td.c-d{grid-area:d;justify-content:flex-end}
  main.ax .tbl.cards.ax-t td.c-d::before{display:none}
  main.ax .tbl.cards.ax-t td.c-a{grid-area:a;width:auto;margin-top:8px}
  main.ax .tbl.cards.ax-t td.c-a .btn{width:100%}
  main.ax .tbl.cards.ax-t td.col-opt{display:flex}
  main.ax .tbl.cards.ax-t .bet-legs{margin-top:6px}
  /* pager: arrows plus the current page only */
  main.ax .tbl-foot{flex-direction:row;align-items:center}
  main.ax .tbl-foot .pager a:not(.pg-arr):not([aria-current]),main.ax .tbl-foot .pager>span{display:none}
  main.ax .tbl-foot .pager a{min-width:44px;height:44px}
  main.ax .bn.strip.ax-nudge .bn-cta{flex:1 1 100%}
  main.ax .ax-nudge.hero>img{height:165%;right:-26%;top:36%}
  /* the last tab can scroll clear of the fade */
  main.ax .ax-tabs::after{content:"";flex:none;width:12px}
  main.ax .ax-kyc{position:relative}
  main.ax .ax-kyc::after{content:"";position:absolute;inset:-10px -4px}
  /* one continuous divider above the meta line of a card */
  main.ax .tbl.cards.ax-t td.c-b{margin-right:-12px;padding-right:12px!important}
  /* section heads with an action: the action drops under the title instead of cutting it */
  main.ax .row-h:has(>.btn){flex-wrap:wrap}
  main.ax .row-h:has(>.btn) .sp{display:none}
  main.ax .row-h>.btn{order:9;flex-basis:100%;justify-content:flex-start;margin-left:-12px}
  main.ax .row-h .ttl h2{white-space:normal}
}
main.ax .ax-use .prog-meta{flex-wrap:wrap;row-gap:2px}
main.ax .ax-use .prog-meta>span{white-space:nowrap}

/* ---------- 32. HELP + LEGAL v2 (help-*.html, legal-*.html, about.html; behaviour in assets/js/docs.js) ----------
   Scoped to .hc-*, .lg-*, .ab-* only: the lobby and other pages never use these classes.
   Help: search-first hub (.hc-hub + .hc-q), topic cards (.hc-topic), live chat button always on screen (.hc-fab).
   Legal: one calm meta line (.lg-meta), print moved into "At a glance", TOC in .lg-otp = sticky side column on desktop,
   a sticky collapsible "On this page" bar at 960px and below (Stripe/Stake docs pattern, not a chip wall). */
/* help: hub header */
.hc-hub .hc-q{height:56px;max-width:640px;padding:0 20px;margin-top:4px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-2)}
.hc-hub .hc-q input{font-size:16px}
.hc-hub .hc-q:focus-within{box-shadow:inset 0 0 0 1.5px var(--flare),0 0 0 4px rgba(255,153,0,.12)}
/* help: topic cards */
.hc-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hc-topic{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:4px 12px;min-height:156px;padding:18px;border-radius:var(--r-l);background:var(--char);color:inherit;text-decoration:none;transition:background-color .15s}
.hc-topic:hover{background:var(--char-2)}
.hc-topic:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.hc-topic-i{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone);transition:background-color .15s}
.hc-topic:hover .hc-topic-i{background:var(--char-3)}
.hc-topic>svg:last-child{grid-column:2;grid-row:1;align-self:start;color:var(--ash);transition:translate .2s,color .2s}
.hc-topic:hover>svg:last-child{translate:3px 0;color:var(--bone)}
.hc-topic b{grid-column:1/-1;margin-top:18px;font-size:15px;font-weight:600;line-height:1.3;text-wrap:balance}
.hc-topic small{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--ash)}
/* help: live chat, always one tap away (Cloud Dancer, never a second Flare CTA) */
.hc-fab{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;right:24px;bottom:24px;z-index:35;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 16px;border-radius:var(--r-pill);background:var(--bone);color:var(--soot);font-size:14px;font-weight:600;box-shadow:0 14px 36px rgba(0,0,0,.55);transition:transform .2s var(--ease),background-color .15s}
.hc-fab:hover{background:var(--core);transform:translateY(-2px)}
.hc-fab:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.hc-fab-on{position:absolute;top:10px;left:34px;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bone)}
.hc-grid{padding-bottom:24px}
/* legal: header meta line + print */
.lg-meta{display:flex;flex-wrap:wrap;row-gap:4px;margin:0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ash)}
.lg-meta>span:not(:last-child)::after{content:"·";margin:0 10px;color:var(--line-3)}
.lg-side .lg-print{justify-self:start;margin-top:2px}
/* legal: "On this page" wrapper, desktop = sticky side column */
.lg-doc>.lg-otp{grid-column:1;grid-row:1/span 2;position:sticky;top:calc(var(--hdr-h) + 16px);align-self:start;min-width:0}
.lg-otp>.toc{position:static;max-height:calc(100vh - var(--hdr-h) - 40px)}
.lg-otp-b{display:none}
@media (max-width:1100px){
  .hc-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-topic{min-height:0}
}
@media (max-width:960px){
  .lg-doc>.lg-otp{grid-column:auto;grid-row:auto;top:var(--otp-top,52px);z-index:20;margin-inline:calc(var(--pad) * -1);padding:8px var(--pad);background:rgba(12,12,12,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .lg-otp-b{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:52px;display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:8px 16px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);color:var(--bone);-webkit-tap-highlight-color:transparent}
  .lg-otp-b>svg{color:var(--ash)}
  .lg-otp-b>svg:last-child{transition:rotate .2s var(--ease)}
  .lg-otp.open .lg-otp-b{box-shadow:inset 0 0 0 1px var(--line-2)}
  .lg-otp.open .lg-otp-b>svg:last-child{rotate:180deg;color:var(--bone)}
  .lg-otp-b:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
  .lg-otp-t{display:grid;gap:1px;min-width:0}
  .lg-otp-t .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
  .lg-otp-t .cur{font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg-otp>.toc{display:none;position:absolute;left:var(--pad);right:var(--pad);top:calc(100% - 2px);max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain;padding:6px;gap:0;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 48px rgba(0,0,0,.6);scrollbar-width:thin}
  .lg-otp.open>.toc{display:grid}
  .lg-otp>.toc .toc-t{display:none}
  .lg-otp>.toc a{flex:none;height:auto;min-height:44px;display:flex;align-items:center;padding:10px 12px 10px 16px;border-radius:var(--r-s);background:none;white-space:normal;font-size:14px;line-height:1.35;color:var(--bone-2)}
  .lg-otp>.toc a::before{display:block;top:12px;bottom:12px}
  .lg-otp>.toc a[aria-current]{background:var(--char-2);color:var(--bone)}
  .lg-doc .prose h2{scroll-margin-top:calc(var(--otp-top,52px) + 84px)}
}
@media (max-width:767px){
  .hc-hub .hc-q{height:52px;padding:0 16px;max-width:none}
  .hc-ph .tabs{gap:20px}
  .hc-ph .tabs>a>svg,.hc-tx{display:none}
  .hc-topics{gap:8px}
  .hc-topic{padding:14px;border-radius:22px}
  .hc-topic-i{width:40px;height:40px}
  .hc-topic b{margin-top:12px;font-size:14px}
  .hc-topic small{font-size:12px}
  .hc-fab{right:16px;bottom:calc(var(--bnav-h) + 14px);width:52px;padding:0;justify-content:center}
  .hc-fab-l{display:none}
  .hc-fab-on{top:9px;left:auto;right:9px}
  .lg-ph .tabs{gap:20px}
  .lg-ph .tabs.fade-r{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .lg-ph .tabs.fade-l{mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .lg-ph .tabs.fade-l.fade-r{mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .lg-side .lg-print{display:none}
}
@media print{.lg-otp,.hc-fab{display:none!important}}
/* about v2: payout block on Char with a single Ember/Flare glow (hero + Plasma state keep the heat gradient) */
.ab-key{position:relative;overflow:hidden;isolation:isolate;background:var(--char)}
.ab-key::before{content:"";position:absolute;z-index:-1;left:-120px;top:50%;width:440px;height:440px;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,153,0,.26),rgba(142,21,4,.2) 42%,transparent 70%);pointer-events:none}
.ab-key .v{color:var(--core)}
.ab-key .v small{color:var(--ash)}
.ab-key p{color:var(--bone-2)}
@media (max-width:767px){
  .ab-hero{min-height:440px}
  .ab-hero>img{height:58%;top:-3%;right:-22%;opacity:1}
  .ab-hero .eyebrow{margin-top:150px}
  .ab-key::before{left:-160px;top:40px;translate:none}
}
@media (max-width:767px){.hc-grid td a,.hc-side a.link,.lg-tools a.link{display:inline-flex;align-items:center;min-height:44px}}
@media (max-width:767px){.lg-ph .tabs{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}}
@media (max-width:767px){.hc-meta .hc-cats{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}}

/* ---------- 33. REVIEW FIXES (UX + PM review, 28.09.2026). Safe, non-structural: labels, icons, states, compact mobile cards ----------
   Lobby (index.html) is not affected: its header, chips, rows and bottom nav keep their rules. */

/* menu sheet: six category tiles in two rows of three (Slots, Live casino, Crash games, Table games, New releases, Popular) */
.mn-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.mn-tiles a{min-height:76px;line-height:1.2}
@media (max-width:960px){.tiles.mn-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mlist>button .end .nb[hidden]{display:none}

/* toast with one action (Deposit on an empty balance) */
.toast .toast-a{flex:none;margin-left:4px}
@media (max-width:767px){.toast .toast-a{height:44px;padding:0 16px}}

/* wallet, withdraw: KYC blocker first, then available vs locked by wagering */
.wl-kyc>div{display:grid;gap:4px;justify-items:start}
.wl-kyc p{margin:0;color:var(--bone-2)}
.wl-kyc .btn{margin-top:8px}
.wl-bals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wl-bals .stat{min-width:0}
.wl-lock .k{display:inline-flex;align-items:center;gap:6px}
.wl-lock .v{font-size:28px;color:var(--ash)}
@media (max-width:767px){
  .wl-lock .v{font-size:24px}
  .wl-kyc .btn{height:44px}
}
@media (max-width:420px){.wl-bals{grid-template-columns:minmax(0,1fr)}}

/* game page: the Play for fun / Real money switch shows only while a game runs (Play and Demo sit in the frame) */
.gv-frame:not(.on)+.gv-bar .gv-mode .seg{display:none}
@media (max-width:767px){
  .gp .gv-frame:not(.on)+.gv-bar{flex-wrap:nowrap}
  .gp .gv-frame:not(.on)+.gv-bar .gv-tools{width:auto;flex:1 1 auto}
  .gp .gv-frame:not(.on)+.gv-bar .gv-mode{width:auto;flex:none}
  .gp .gv-frame:not(.on)+.gv-bar .gv-mode .ctl.sel.sm{height:44px}
  /* provider card: the long "All <provider> games" link takes its own row */
  .gp .gv-prov{flex-wrap:wrap}
  .gp .gv-prov #g-pall{order:9;flex:1 1 100%;justify-content:space-between;padding:0 8px}
  .gp .gv-prov #g-pall svg{display:block}
}
/* game page: does this game count towards the active bonus wagering */
.gv-wag{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 16px;border-radius:var(--r-m);background:var(--char);font-size:13px;line-height:1.45;color:var(--bone-2)}
.gv-wag:empty{display:none}
.gv-wag>svg{flex:none;margin-top:1px;color:var(--ok)}
.gv-wag.low>svg{color:var(--ash)}
.gv-wag b{color:var(--bone);font-weight:600}
/* game page: H3 inside the About panel are Onest 16/600, the Loos caps stay for section headings */
.gp .gv-doc h3{font-family:var(--body);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none}

/* catalog and category, phones: compact page header (H1 and counts, no image, no description) */
@media (max-width:767px){
  .cp .bn.head{min-height:0;padding:14px 16px;gap:0;justify-content:flex-start;background:var(--char);border-radius:22px}
  .cp .bn.head>img,.cp .bn.head .bn-p{display:none}
  .cp .bn.head .bn-t{max-width:100%;gap:8px}
  .cp .bn.head .ph-ic{width:32px;height:32px}
  .cp .bn.head .ph-ic svg{width:18px;height:18px}
}

/* offer cards: the title links to the details page (on phones it replaces the Details button) */
.of-b h3 a{color:inherit;text-decoration:none}
.of-b h3 a:hover{color:var(--flare)}
.of-b h3 a:focus-visible{outline:2px solid var(--flare);outline-offset:2px;border-radius:var(--r-s)}
/* bonuses and promotions, phones: compact horizontal offer card, art 88 px left, then number, title and one button */
@media (max-width:767px){
  .offers{gap:8px}
  .offers .offer{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:14px;align-items:start;min-height:112px;padding:12px;border-radius:22px}
  .offers .offer .of-art{display:contents}
  .offers .offer .of-art::before{content:"";position:static;inset:auto;z-index:auto;grid-column:1;grid-row:1/-1;align-self:stretch;min-height:88px;border-radius:var(--r-m);background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.028) 11px 12px),linear-gradient(180deg,#1c191a,#262223)}
  .offers .offer .of-art.hero::before{background:var(--heat)}
  .offers .offer .of-art img{position:static;inset:auto;z-index:auto;grid-column:1;grid-row:1/-1;align-self:stretch;width:88px;height:100%;min-height:88px;translate:none;aspect-ratio:auto;border-radius:var(--r-m);object-fit:cover;object-position:60% 45%;-webkit-mask-image:none;mask-image:none}
  .offers .offer .of-art.hero img{height:100%;right:auto;left:auto}
  .offers .offer .of-art .tag,.offers .offer .of-ic{display:none}
  .offers .offer .of-v{grid-column:2;grid-row:1;font-size:20px}
  .offers .offer .of-v small{margin-top:4px;font-size:10px}
  .offers .offer .of-b{grid-column:2;grid-row:2;padding:6px 0 0;gap:0}
  .offers .offer .of-b h3{font-size:13px;line-height:1.25}
  .offers .offer .of-b h3 a{position:relative}
  .offers .offer .of-b h3 a::after{content:"";position:absolute;inset:-12px -6px}
  .offers .offer .of-b p,.offers .offer .of-meta,.offers .offer .of-tags{display:none}
  .offers .offer .of-f{grid-column:2;grid-row:4;padding:10px 0 0}
  .offers .offer .of-f .btn{flex:none;height:44px;padding:0 18px}
  .offers .offer .of-f .btn.quiet{display:none}
  a.offer:hover .of-art img{transform:none}
}

/* VIP FAQ: sections switch with tabs (rule: sections = tabs, in-list filters = chips or segment) */
.tabs.vp-faq{width:auto}
@media (max-width:767px){.tabs.vp-faq{display:flex;gap:20px}.tabs.vp-faq>button{height:44px}}

/* help: verification status next to the action (same state as the profile menu and Menu) */
.hc-kyc-st{align-items:center;flex-wrap:wrap}

/* ---------- 34. GUEST STATE + FUNNEL (app.js: AUTH / setAuth, DLG.login sign-up, DLG.deposit first deposit; COMPONENTS.md "Guest state and the first-deposit path") ----------
   The player state (default) looks exactly as before: every rule below applies only to body.is-guest, to
   .gst-only elements (hidden for a player) or to new first-deposit parts of the wallet. */
/* state switches for page authors */
body:not(.is-guest) .gst-only{display:none!important}
body.is-guest .pl-only{display:none!important}
/* guest: the header "Sign up" is the one Flare; a Flare button inside the page reads as Bone (dialogs keep theirs) */
body.is-guest .page .btn.hot{background:var(--bone);color:var(--soot)}
body.is-guest .page .btn.hot:hover{background:#fff}

/* header: Log in (ghost) + Sign up (Flare) in place of balance, Deposit, bell and avatar */
.gst-acts{display:flex;align-items:center;gap:8px;flex:none}
@media (max-width:767px){
  .gst-acts{gap:6px}
  .gst-acts .btn{position:relative;overflow:visible;height:36px;padding:0 14px;font-size:13px}
  .gst-acts .btn::after{content:"";position:absolute;inset:-4px -3px} /* 44 px hit area, no visual change */
}
@media (max-width:380px){.gst-acts .btn{padding:0 12px}}

/* footer: the prototype switch, one quiet line in .foot-bot */
.foot-sw{display:flex}
.foot-sw button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;font-family:var(--mono);font-size:11px;color:var(--ash);text-decoration:underline dotted rgba(156,149,146,.6);text-underline-offset:3px;border-radius:2px}
.foot-sw button:hover{color:var(--bone)}
.foot-sw button:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
@media (max-width:767px){.foot-sw button{min-height:44px}}

/* menu sheet: the welcome-offer card with Log in / Sign up replaces the account card */
.mn-gst{display:grid;gap:10px;padding:10px;border-radius:var(--r-m);background:var(--char)}
.bn.mn-gb{min-height:108px;padding:16px 18px;justify-content:flex-end;gap:0;border-radius:10px}
.bn.mn-gb>img{right:-8%;height:170%;top:48%}
.mn-gb .bn-v{font-size:30px}
.mn-ga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mn-ga .btn{height:44px}
.mn-ga .btn:not(.hot){background:var(--char-2)}
.mn-ga .btn:not(.hot):hover{background:var(--char-3)}

/* profile, history, transactions: a calm "log in to see" state */
main.gst-lock>:not(.gst-acc){display:none!important}
.gst-acc{width:100%;max-width:640px;justify-self:center;margin-top:clamp(0px,3vw,32px)}
.gst-acc .empty{padding:40px 12px 36px;gap:12px}
.gst-acc .eyebrow{color:var(--ash)}
.gst-acc h1{font-size:var(--h1,28px);line-height:1.08;max-width:18ch}
.gst-acc p{max-width:44ch;font-size:15px;line-height:1.5;color:var(--ash)}
.gst-acc .cluster{justify-content:center;margin-top:6px}
@media (max-width:767px){.gst-acc .cluster{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.gst-acc .cluster .btn{height:48px}}

/* bonuses: a guest sees the offers only (no Active / History of the sample player) */
body.is-guest[data-page="bonuses"] .tabs[data-tabs],body.is-guest #bn-ac,body.is-guest #bn-hi{display:none!important}
body.is-guest #bn-av{display:grid!important}
/* VIP: the join teaser replaces the progress; no "current level" marking */
.vp-join h2{font-size:clamp(22px,2.4vw,32px);line-height:1.05;max-width:22ch}
.vp-join>p{max-width:56ch;font-size:15px;line-height:1.5}
body.is-guest .vl.is-now{box-shadow:none}
body.is-guest .vtbl .is-now{background:none}
body.is-guest .vtbl thead th.is-now{box-shadow:none}
/* no balances for a guest */
body.is-guest .cur-pop .ol-v,body.is-guest .gv-wag{display:none}

/* ---- sign-up sheet (DLG.login, Sign up tab) ---- */
.lg-cur{display:flex;align-items:center;gap:8px;min-height:32px;margin:0;font-size:13px;color:var(--ash)}
.lg-cur b{margin-left:auto;font-size:12px;font-weight:500;color:var(--bone)}
.lg .lg-go.su{height:auto;min-height:56px;padding:9px 20px;flex-direction:column;gap:4px}
.lg-go-m{font-size:16px;font-weight:600;line-height:1.1}
.lg-go-s{font-size:12px;font-weight:500;line-height:1.2;opacity:.75}
.lg-legal a{color:var(--ash)}
.lg-legal a:hover{color:var(--bone)}

/* ---- wallet, first deposit (dialog.dlg.wl.first) ---- */
.wl.first #wl-tabs{display:none}
.wl .dlg-h .wl-back{margin-left:-6px}
.wl[data-step]:not([data-step=""]) #wl-sub{display:none}
.pm-apple .pm-lg,.pm-google .pm-lg{gap:2px;font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:-.01em}
.pm-apple .pm-lg svg{margin-top:-3px}
.wl-err{align-items:center}
/* new card form: number with the detected brand, expiry and CVC side by side at every width */
.wl-card{display:grid;gap:12px}
.wl-card .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.wl-card .field{grid-template-columns:minmax(0,1fr)}
.wl-card .ctl input{width:0;font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wl-brand{flex:none;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--bone)}
.wl-brand:empty{display:none}
.wl-brand[data-b="amex"],.wl-brand[data-b="maestro"]{color:var(--fail)}
.wl-3ds-n{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12px;line-height:1.45;color:var(--ash)}
.wl-3ds-n svg{flex:none;margin-top:1px}
.wl-3ds-n .mono{display:block;margin-top:2px;font-size:11px;color:rgba(156,149,146,.8)}
/* more methods: Skrill, Neteller, Paysafecard, SEPA, Trustly */
.wl-more .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.wl-more .opt-ic{width:auto;min-width:60px;padding:0 6px;font-size:9px;letter-spacing:.04em}
@media (max-width:767px){.wl-more .opts{grid-template-columns:minmax(0,1fr)}.wl-more .opt{min-height:60px}}
/* payment stages: processing, 3-D Secure, success, pending, declined */
.wl-stage{flex:1;min-height:0;display:flex;flex-direction:column}
.wl-sb{align-content:center;min-height:380px}
.wl-st{display:grid;justify-items:center;gap:12px;text-align:center;padding:8px 0}
.wl-st h3{font-size:18px;line-height:1.15;outline:none}
.wl-st>p{max-width:40ch;font-size:14px;line-height:1.5;color:var(--ash)}
.wl-st-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--char);box-shadow:inset 0 0 0 1px var(--line);color:var(--bone)}
.wl-st-ic.ok{background:var(--ok-bg);box-shadow:none;color:var(--ok)}
.wl-st-ic.pend{background:var(--pend-bg);box-shadow:none;color:var(--pend)}
.wl-st-ic.fail{background:var(--fail-bg);box-shadow:none;color:var(--fail)}
.wl-spin{width:56px;height:56px;border-radius:50%;background:conic-gradient(from 90deg,rgba(255,153,0,0) 0 15%,var(--ember) 45%,var(--flare) 80%,var(--core));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:wlSpin .9s linear infinite}
@keyframes wlSpin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.wl-spin{animation-duration:2.4s}}
/* success: the credited amount is the peak of the path (Core) */
.wl-amt{display:grid;justify-items:center;gap:8px;margin:4px 0 0}
.wl-amt b{font-family:var(--display);font-weight:700;font-size:44px;line-height:.95;letter-spacing:-.02em;color:var(--core);text-shadow:0 0 22px rgba(255,197,107,.45)}
.wl-amt span{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--core)}
.wl-kyc-n{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--ash);text-align:center}
.wl-kyc-n svg{flex:none}
.wl-kyc-n .link{color:var(--bone);text-decoration-color:rgba(243,240,235,.4)}
.wl-3ds .kv{width:100%;max-width:360px;padding:2px 16px;border-radius:var(--r-m);background:var(--char);text-align:left}
.wl-3ds .hint{max-width:36ch}
.wl-sf .btn.quiet{height:44px}
@media (max-width:767px){
  .wl-sb{min-height:0}
  .wl-amt b{font-size:40px}
}
/* Edge draws its own password-reveal eye next to ours: keep one */
input::-ms-reveal,input::-ms-clear{display:none}
/* processing cannot be closed: hide the close button instead of ignoring it */
.wl[data-step="proc"] .dlg-h [data-close]{visibility:hidden}

/* ---------- 35. STRUCTURE v3 (28.09.2026): clean catalog (casino.html), providers page + multi-select filter (providers.html, catalog.js), Bonuses = personal (bonuses.html), Promotions = public storefront (promo.html). COMPONENTS.md "Structure v3" ---------- */

/* --- catalog: Providers button (replaces the select). Looks like the Sort select next to it; a Flare count badge when providers are picked --- */
.cf-pb{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 40px 0 16px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line);color:var(--ash);font-size:15px;transition:box-shadow .15s,background-color .15s}
.cf-pb:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.cf-pb:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--flare),0 0 0 4px rgba(255,153,0,.12)}
.cf-pb[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--flare)}
.cf-pb-t{flex:1;min-width:0;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-pb .nb{flex:none}
.cf-pb.on>svg{color:var(--flare)}
/* provider page: no Providers button, Sort takes the row */
.cp .cat-tools.no-pv{grid-template-columns:minmax(0,1fr) 220px}
@media (max-width:767px){
  .cp .cf-pb{height:44px;padding:0 28px 0 14px;font-size:14px}
  .cp .cf-pb>svg{display:none}
  .cp .cat-tools.no-pv .cat-o{grid-template-columns:minmax(0,1fr)}
}

/* selected providers: removable chips between the grid heading and the covers */
.cf-sel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-4px}
.cf-sel .cf-x{height:36px;padding:0 10px 0 14px;gap:8px;background:var(--char-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.cf-sel .cf-x svg{color:var(--ash);transition:color .15s}
.cf-sel .cf-x:hover svg{color:var(--bone)}
.cf-sel .cf-xall{height:36px}
@media (max-width:767px){
  .cf-sel{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-4px -16px 0;padding:2px 16px}
  .cf-sel::-webkit-scrollbar{display:none}
  .cf-sel .cf-x,.cf-sel .cf-xall{flex:none;height:44px}
}

/* provider picker dialog: popover 400 px under the button (desktop), sheet at 767 and below (shared dialog rules) */
dialog.dlg.pop.pvf{width:400px}
.pvf .dlg-h{padding:16px 12px 0 20px}
.pvf .dlg-h h2{flex:none;font-size:14px}
.pvf-ct{flex:1;font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.02em}
.pvf-q{flex:none;padding:12px 12px 4px}
.pvf-q .ctl{background:var(--char)}
.pvf .dlg-b{padding:8px;gap:0;max-height:440px}
.pvf-l{display:grid;gap:2px}
.pvf-r{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:6px 12px 6px 6px;border-radius:var(--r-m);cursor:pointer;transition:background-color .15s}
.pvf-r:hover,.pvf-r.on{background:var(--char)}
.pvf-r:has(input:focus-visible){outline:2px solid var(--flare);outline-offset:-2px}
.pvf-lg{height:44px;border-radius:var(--r-s);display:grid;place-items:center;padding:0 8px;background:var(--char-2);color:var(--ash);overflow:hidden;text-align:center;transition:color .15s}
.pvf-r.on .pvf-lg,.pvf-r:hover .pvf-lg{color:var(--bone)}
.pvf-lg .wm-a,.pvf-lg .wm-c{font-size:9px}.pvf-lg .wm-b{font-size:12px}.pvf-lg .wm-d{font-size:8px}.pvf-lg .wm-e{font-size:11px}
.pvf-lg>span{max-width:100%;line-height:1.1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pvf-nm{display:grid;gap:2px;min-width:0}
.pvf-nm b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvf-nm small{font-family:var(--mono);font-size:11px;color:var(--ash)}
.pvf-r .check input:focus-visible{outline:none}
.pvf-empty{display:grid;justify-items:center;gap:8px;padding:28px 16px;text-align:center;color:var(--ash);font-size:14px}
.pvf-f{grid-template-columns:auto minmax(0,1fr);padding:12px}
.pvf-f .btn{height:44px}
.pvf-f .btn[disabled]{opacity:.35}
@media (max-width:767px){
  dialog.dlg.pop.pvf{max-height:88dvh}
  .pvf .dlg-h{padding:0 12px 0 20px}
  .pvf-q{padding:12px 16px 4px}
  .pvf-q .ctl{height:44px}
  .pvf .dlg-b{padding:8px 10px;max-height:none}
  .pvf-r{grid-template-columns:96px minmax(0,1fr) auto;min-height:60px}
  .pvf-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .pvf-f .btn{height:48px}
}

/* --- providers.html: header, tools, tile grid --- */
.pvp-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.pvp-ph .ph-meta{margin:0}
.pvp-ph h1{font-size:var(--h1)}
.pvp-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.pvp-tools .ctl input{font-size:15px}
.pvp-sort .pick{height:44px;padding:0 18px}
.pvp-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.pvp-grid .pv{position:relative;height:124px;align-content:center;justify-items:center;gap:10px;padding:0 16px;white-space:normal}
.pvp-grid .pv small{font-size:11px}
.pvp-grid .pv small b{color:var(--bone);font-weight:500}
.pv-ty{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(156,149,146,.7)}
@media (min-width:1181px){.pvp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:767px){
  .pvp-t{gap:10px}
  .pvp-ph .lead{display:none}
  .pvp-tools{grid-template-columns:minmax(0,1fr);gap:10px}
  .pvp-tools .ctl{height:48px}
  .pvp-tools .cf-kbd{display:none}
  .pvp-sort{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pvp-grid .pv{height:104px;padding:0 10px;gap:8px}
  .pvp-grid .wm-a,.pvp-grid .wm-c{font-size:11px}.pvp-grid .wm-b{font-size:15px}.pvp-grid .wm-d{font-size:10px}.pvp-grid .wm-e{font-size:14px}
}

/* --- bonuses.html: personal cabinet --- */
.bnp-rule{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ash)}
.bnp .bact .panel{display:grid;gap:18px;align-content:start}
.bnp-left{gap:8px 12px}
.bnp-end{font-size:11px}
.bnp-games{display:grid;gap:10px}
.bnp-gl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bnp-g{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-m);background:var(--char-2);color:var(--bone);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .15s,box-shadow .15s}
.bnp-g svg{color:var(--ash)}
.bnp-g b{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ok)}
.bnp-g.no{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ash)}
.bnp-g.no b{color:var(--ash)}
a.bnp-g:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
a.bnp-g:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.bnp-acts .btn{height:44px}
.bnp .bact-side{align-content:start}
/* compact empty state (no active bonus) */
.bnp-none{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-m);background:var(--char)}
.bnp-none .e-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--ash)}
.bnp-none>div{flex:1;display:grid;gap:2px;min-width:0}
.bnp-none b{font-size:14px;font-weight:600}
.bnp-none small{font-size:13px;color:var(--ash)}
.bnp-none .btn{height:40px}
/* welcome pack progress: three steps on one track (done / next / locked) */
.wpk{display:grid;gap:20px}
.wpk-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px}
.wpk-h h3{font-size:20px;margin-top:6px}
.wpk-s{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wpk-s li{position:relative;display:grid;gap:4px;align-content:start;padding:16px 16px 14px;border-radius:var(--r-m);background:var(--char-2);min-width:0;overflow:hidden}
.wpk-s li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line-2)}
.wpk-s li.done::before{background:var(--ok)}
.wpk-s li.cur{background:var(--heat)}
.wpk-s li.cur::before{background:var(--flare)}
.wpk-k{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.wpk-s li.cur .wpk-k{color:rgba(243,240,235,.82)}
.wpk-v{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--bone)}
.wpk-s li.lock .wpk-v{color:transparent;-webkit-text-stroke:1.1px rgba(243,240,235,.42)}
.wpk-s li.done .wpk-v{color:var(--ash)}
.wpk-s li.cur .wpk-v{color:var(--core);text-shadow:0 0 18px rgba(255,197,107,.4)}
.wpk-s small{font-size:12px;color:var(--ash)}
.wpk-s li.cur small{color:rgba(243,240,235,.84)}
.wpk-st{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ash)}
.wpk-s li.done .wpk-st{color:var(--ok)}
.wpk-s li.cur .wpk-st{color:var(--bone)}
.wpk-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.wpk-f p{flex:1;min-width:240px;font-size:14px;color:var(--bone-2)}
.wpk-f .btn{height:44px}
/* personal offers: a personal status line, visible on phones too */
.bnp-offers .of-me{font-size:13px;color:var(--bone)}
.bnp-auto{height:32px}
/* promo code: folded at the end of Available */
.bnp-code{border-radius:var(--r-m);background:var(--char)}
.bnp-code summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;font-size:14px;font-weight:600;border-radius:var(--r-m)}
.bnp-code summary::-webkit-details-marker{display:none}
.bnp-code summary .pc-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.bnp-code summary>span:nth-child(2){flex:1}
.bnp-code summary>svg{color:var(--ash);transition:rotate .2s var(--ease)}
.bnp-code[open] summary>svg{rotate:180deg}
.bnp-code summary:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.bnp-code .pcode{display:block;padding:0 16px 16px;background:none;border-radius:0}
.bnp-code .pcode .ctl{max-width:440px}
/* guest teaser */
.bnp-gst{display:grid;gap:16px}
.bnp-gst-bn{min-height:240px;padding:32px 40px}
.bnp-gst-bn .bn-v{font-size:clamp(40px,4.4vw,64px)}
.bnp-gst-bn .bn-v small{font-size:13px;margin-top:10px}
.bnp-gst-bn .bn-h{font-size:17px;margin-top:6px}
.bn.bnp-gst-bn>img{right:4%;height:170%}
.bnp-gst-l{font-size:14px;color:var(--ash)}
.bnp-gst-l .link{margin-inline:2px}
@media (max-width:960px){
  .bnp-gl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .bnp-rule{display:none}
  .bnp .ph-actions{display:none}
  .bnp-gl{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bnp-g{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 10px;font-size:12px;line-height:1.2}
  .bnp-g svg{display:none}
  .bnp-g b{margin-left:0;font-size:14px}
  .bnp-how li{padding:14px 16px}
  .bnp .bact .panel{gap:14px}
  .bnp-g{min-height:44px}
  .bnp-acts{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .wpk{gap:14px;padding:16px}
  .wpk-h h3{font-size:17px}
  .wpk-h .timer-l>span:first-child{display:none}
  .wpk-s{gap:6px}
  .wpk-s li{padding:12px 10px 10px}
  .wpk-v{font-size:20px}
  .wpk-s small{font-size:11px;line-height:1.3}
  .wpk-k{font-size:10px}
  .wpk-f{display:grid;gap:10px}
  .wpk-f p{min-width:0;font-size:13px}
  .wpk-f .btn{width:100%}
  .bnp-offers .offer .of-b p.of-me{display:block;margin-top:4px;font-size:12px;color:var(--ash)}
  .bnp-offers .offer .of-f .st{height:28px;align-self:start}
  .bnp-code .pcode .ctl{max-width:none;height:44px}
  .bnp-gst-bn{min-height:236px;padding:20px}
  .bn.bnp-gst-bn>img{right:-30%;top:50%;height:100%}
  .bnp-gst-bn .bn-t{max-width:66%}
  .bnp-gst-bn .bn-v{font-size:40px}
  .bnp-gst-bn .bn-v small{font-size:12px;max-width:22ch}
  .bnp-gst-bn .bn-h{font-size:14px;max-width:18ch}
  .bnp-gst-bn .bn-p{display:none}
  .bnp-gst-bn .bn-cta{height:44px}
  .bnp-gst-l{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
  .bnp-gst-l .link{min-height:44px;display:inline-flex;align-items:center}
}

/* --- promo.html: featured welcome pack + tournaments teaser, then the storefront grid --- */
.pr-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}
.pr-top .pr-feat{min-height:260px}
.pr-tour{min-height:260px;padding:28px 28px 24px;justify-content:flex-end}
.bn.hero.pr-tour>img{right:-22%;height:118%;opacity:.6}
.pr-tour .bn-p{max-width:34ch}
.pr-tour .bn-v{font-size:36px}
.pr-new{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-right:8px;border-radius:var(--r-pill);background:var(--bone);color:var(--soot);font-size:10px;letter-spacing:.04em}
.pr-used{height:32px}
@media (max-width:960px){
  .pr-top{grid-template-columns:minmax(0,1fr)}
  .pr-top .pr-feat,.pr-tour{min-height:200px}
}
@media (max-width:767px){
  .pr-top{gap:8px}
  .pr-top .pr-feat{min-height:200px}
  .pr-tour{min-height:0;padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
  .pr-tour .bn-t{grid-column:1;gap:4px}
  .pr-tour .bn-v{font-size:24px}
  .pr-tour .bn-v small{font-size:10px;margin-top:4px}
  .pr-tour .bn-h,.pr-tour .bn-p{display:none}
  .pr-tour .bn-cta{grid-column:2;grid-row:1;margin:0;height:44px}
  .bn.hero.pr-tour>img{height:150%;right:18%;opacity:.55}
  .offers .offer .of-f .pr-used{height:28px;align-self:start}
}

/* ---------- 36. RETENTION + VIP v3 (28.09.2026): tournaments.html, tournament.html, jackpots.html, rewards.html, vip.html v3,
   lobby Jackpots row, game-page tournament note. Logic: assets/js/retention.js; jackpot counters: app.js [data-jp]. COMPONENTS.md section 10 ---------- */
/* shell: the rail has 15 items now, so it scrolls on short screens */
.rail{overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media (max-width:767px){.bnav a,.bnav button{white-space:nowrap;letter-spacing:-.01em}}

/* live pill (green = status "running") */
.tn-live{background:var(--ok-bg);color:var(--ok)}
.tn-live>i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:onair 1.6s ease-out infinite}

/* ----- jackpot tiles: lobby row (.jp-l) and jackpots.html (.jp-l.jp-big). Counter style = the crash card multiplier ----- */
.jp-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.jp{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:6px;align-content:start;min-width:0;padding:16px 20px;border-radius:var(--r-m);background:var(--char);color:inherit;text-decoration:none;transition:box-shadow .3s}
.jp:hover,.jp:focus-visible{box-shadow:inset 0 0 0 1.5px var(--flare);outline:none}
.jp-h{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ash)}
.jp-h b{font-family:var(--display);font-size:15px;font-weight:700;line-height:1.1;text-transform:uppercase;color:var(--bone)}
.jp-h .tag{margin-left:auto}
.jp-v{font-family:var(--mono);font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--bone)}
.jp-m{font-size:12px;line-height:1.4;color:var(--ash)}
.jp-m b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.jp .prog{margin:4px 0 2px}
/* Mega is the peak of the row: Core, like the crash card at its peak */
.jp-mega{background:radial-gradient(90% 140% at 100% 0%,rgba(255,241,214,.18),rgba(255,153,0,.10) 40%,var(--char) 75%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.32)}
.jp-mega .jp-v{color:var(--core);text-shadow:0 0 16px rgba(255,197,107,.9)}
.jp-mega .jp-h>svg{color:var(--core)}
.jp-big{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.jp-big .jp{padding:22px 24px;border-radius:var(--r-l)}
.jp-big .jp-mega{grid-row:span 2;align-content:center;gap:14px;padding:32px 36px}
.jp-big .jp-mega .jp-v{font-size:clamp(40px,4.6vw,64px)}
.jp-big .jp:not(.jp-mega) .jp-v{font-size:32px}
.jp-games{grid-template-columns:repeat(6,minmax(0,1fr))}
.jp-how{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
.jp-kv .kv dd.mono{font-size:12px}
@media (max-width:1100px){.jp-games{grid-template-columns:repeat(4,minmax(0,1fr))}.jp-how{grid-template-columns:minmax(0,1fr)}}

/* ----- tournaments.html ----- */
.tn-feat{min-height:260px;padding:32px 40px;justify-content:flex-end}
.tn-feat>img{right:2%;height:165%}
.tn-feat .bn-h{font-size:clamp(20px,2vw,28px)}
.tn-feat .bn-v{font-size:clamp(40px,4.4vw,60px)}
.tn-feat-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.tn-feat .bn-cta{margin:0}
.tn-feat .timer .tm b,.tn-hero .timer .tm b{background:rgba(12,12,12,.42)}
.tn-feat .timer-l>span:first-child,.tn-hero .timer-l>span:first-child{color:rgba(243,240,235,.78)}
.tn-feat .timer .tm small,.tn-hero .timer .tm small{color:rgba(243,240,235,.7)}
.tn-feat-me{display:inline-flex;align-items:baseline;gap:8px}
.tn-feat-me .mono{color:rgba(243,240,235,.78);text-transform:uppercase;letter-spacing:.06em}
.tn-feat-me b{font-family:var(--mono);font-size:20px;font-weight:500}
.tn-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* card: the whole card opens the tournament (.tn-a overlay); buttons sit above it */
.tn{position:relative;isolation:isolate;display:grid;gap:14px;align-content:start;min-width:0;padding:20px;border-radius:var(--r-l);background:var(--char);transition:box-shadow .2s}
.tn:has(.tn-a:hover),.tn:has(.tn-a:focus-visible){box-shadow:inset 0 0 0 1.5px var(--flare)}
.tn-a{position:absolute;inset:0;z-index:0;border-radius:inherit}
.tn-a:focus-visible{outline:none}
.tn>:not(.tn-a){position:relative;z-index:1;pointer-events:none}
.tn .btn,.tn a:not(.tn-a),.tn button{pointer-events:auto}
.tn-top{display:flex;align-items:center;gap:10px;min-width:0}
.tn-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.tn-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tn-top>.tag,.tn-top>.st{margin-left:auto;flex:none}
.tn-n{font-size:18px;line-height:1.1}
.tn-pool{display:grid;gap:4px}
.tn-pool b{font-family:var(--mono);font-size:30px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tn-pool small{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash)}
.tn-time{min-height:30px}
.tn-ended .mono{font-size:12px}
.tn-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:12px 0;border-block:1px solid var(--line)}
.tn-kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.tn-kv dd{margin:3px 0 0;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tn-g{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--ash)}
.tn-g>svg{flex:none}
.tn-g>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-g b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.tn-f{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.tn-me{display:inline-flex;align-items:center;gap:10px;min-width:0;font-size:13px}
.tn-me>svg{flex:none}
.tn-me b{display:block;font-family:var(--mono);font-size:13px;font-weight:500}
.tn-me small{display:block;font-size:12px;color:var(--ash)}
.tn-pl{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.02em}
.tn-cta{flex:none;height:40px}
.tn-done .tn-pool b{color:var(--bone-2)}
.tn-vip{background:linear-gradient(160deg,rgba(255,241,214,.07),var(--char) 45%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.14)}
@media (max-width:1100px){.tn-l{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ----- tournament.html ----- */
.tn-d{display:grid;gap:40px;min-width:0}
.tn-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "time time" "kv go";align-items:end;gap:20px 40px;min-height:0;padding:36px 40px}
.tn-hero>img{right:0;height:160%}
.tn-hero .bn-t{grid-area:t;gap:12px}
.tn-hero .tn-time{grid-area:time;justify-self:start}
.tn-hero .tn-hkv{grid-area:kv;width:100%;max-width:520px;border-color:rgba(243,240,235,.16)}
.tn-hero .tn-hkv dt{color:rgba(243,240,235,.7)}
.tn-hero .tn-go{grid-area:go;justify-self:end}
.tn-hero h1{font-size:var(--h1);line-height:1.05}
.tn-hero .bn-v{font-size:clamp(40px,4.4vw,60px)}
.tn-hero .tn-tags .tag:not(.tn-live){background:rgba(12,12,12,.45);color:var(--bone)}
.tn-hero .st{background:rgba(12,12,12,.45)}
.tn-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tn-stat .note{grid-column:1/-1}
.tn-next .prog{margin:4px 0 2px}
.tn-next .d b{color:var(--bone)}
.tn-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
.tn-side{display:grid;gap:12px;position:sticky;top:calc(var(--hdr-h) + 16px)}
/* leaderboard: top 10 by default, top 50 on demand; top three on the heat scale (1 Core, 2 Flare, 3 Ember); your row pinned */
.lb{gap:12px;padding-bottom:16px}
.lb-upd{font-size:11px}
.lb-wrap{margin-inline:-24px}
.lb-t{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.lb-t th{padding:8px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--ash)}
.lb-t td{height:48px;padding:0 12px;border-bottom:1px solid var(--line);font-size:14px}
.lb-t .lb-p{width:72px;padding-left:24px}
.lb-t .lb-s{width:112px;text-align:right;font-family:var(--mono);font-size:13px}
.lb-t .lb-z{width:104px;padding-right:24px;text-align:right;font-family:var(--mono);font-size:13px;color:var(--ash)}
.lb-t tbody tr.lb-x{display:none}
.lb-t.open tbody tr.lb-x{display:table-row}
.lb-p span{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--r-pill);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ash)}
.lb-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-n .mono{font-size:13px;color:var(--bone)}
.lb-n b{font-weight:600}
.lb-n small{display:block;margin-top:1px;font-size:11px;line-height:1.2}
.lb-r.top1 .lb-p span{background:var(--core);color:var(--soot);box-shadow:0 0 14px rgba(255,197,107,.6)}
.lb-r.top2 .lb-p span{background:var(--flare);color:var(--soot)}
.lb-r.top3 .lb-p span{background:var(--ember);color:var(--bone)}
.lb-r.top1{background:linear-gradient(90deg,rgba(255,241,214,.10),rgba(255,241,214,0) 70%)}
.lb-r.top1 .lb-s,.lb-r.top1 .lb-z{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.5)}
.lb-r.top2 .lb-z,.lb-r.top3 .lb-z{color:var(--bone)}
.lb-r.is-me td{background:rgba(255,153,0,.08)}
.lb-r.is-me td:first-child{box-shadow:inset 3px 0 0 var(--flare)}
.lb-r.is-me .lb-p span{color:var(--bone)}
body.is-guest .lb-r.is-me td{background:none;box-shadow:none}
.lb-pin td{position:sticky;bottom:12px;z-index:2;background:linear-gradient(rgba(255,153,0,.12),rgba(255,153,0,.12)),var(--char-2);border-bottom:0;box-shadow:0 -1px 0 var(--line)}
.lb-pin td:first-child{box-shadow:inset 3px 0 0 var(--flare),0 -1px 0 var(--line)}
.lb-pin.off{visibility:hidden}
.lb-r.bump td{animation:lbBump 1.2s ease-out}
@keyframes lbBump{0%{background-color:rgba(255,153,0,.16)}100%{background-color:transparent}}
.lb-more{height:44px}
.lb-empty{padding:32px 0}
/* prizes and points */
.pz-l{list-style:none;margin:0;padding:0;display:grid}
.pz-l li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-top:1px solid var(--line)}
.pz-l li:first-child{border-top:0}
.pz-p{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ash)}
.pz-top .pz-p::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.pz-1{--c:var(--core)}.pz-2{--c:var(--flare)}.pz-3{--c:var(--ember)}
.pz-v{font-family:var(--mono);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.pz-v small{font-size:11px;font-weight:400;color:var(--ash)}
.pz-1 .pz-v{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.5)}
.tn-games.slots.lane{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px) / 7);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.tn-games>*{scroll-snap-align:start}
.tn-games::-webkit-scrollbar{display:none}
@media (max-width:1180px){.tn-games.slots.lane{grid-auto-columns:calc((100% - 48px) / 5)}.tn-games.slots>:nth-child(n+6){display:grid}}
@media (max-width:767px){.tn-games.slots.lane{display:flex}}
.tn-f1{padding:14px 16px;border-radius:var(--r-m);background:var(--char-2);font-family:var(--mono);font-size:16px;font-weight:500;color:var(--bone)}
.tn-ex{font-size:14px;line-height:1.5;color:var(--bone-2)}
@media (max-width:1100px){
  .tn-grid{grid-template-columns:minmax(0,1fr)}
  .tn-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .tn-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ----- game page: "this game scores in …" ----- */
.gv-tn{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px 14px;min-height:56px;padding:10px 16px 10px 10px;border-radius:var(--r-m);background:var(--char);color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.gv-tn:hover,.gv-tn:focus-visible{box-shadow:inset 0 0 0 1.5px var(--flare);outline:none}
.gv-tn-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.gv-tn-t{min-width:0}
.gv-tn-t b{display:block;font-size:14px;font-weight:600}
.gv-tn-t small{display:block;margin-top:2px}
.gv-tn>svg{color:var(--ash)}

/* ----- rewards.html ----- */
.rw-reset{display:inline-flex;align-items:center;gap:10px;margin:0}
.rw-reset .mono{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.rw-streak{margin-top:-6px;font-size:14px;color:var(--ash)}
.rw-cal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.rw-d{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;padding:16px 10px 14px;border-radius:var(--r-m);background:var(--char);text-align:center}
.rw-n{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);white-space:nowrap}
.rw-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.rw-v{font-family:var(--mono);font-size:18px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.rw-d small{min-height:2.6em;font-size:11px;line-height:1.3;color:var(--ash)}
.rw-got,.rw-lk{display:inline-flex;align-items:center;gap:4px;height:32px;font-size:12px;color:var(--ash)}
.rw-got{color:var(--ok)}
.rw-d .btn{height:32px}
.rw-d.is-claimed{background:rgba(32,30,31,.5)}
.rw-d.is-claimed .rw-v{color:var(--ash)}
.rw-d.is-claimed .rw-i{background:var(--ok-bg);color:var(--ok)}
.rw-d.is-today{background:radial-gradient(100% 80% at 50% 0%,rgba(255,153,0,.14),var(--char) 70%);box-shadow:inset 0 0 0 1.5px var(--flare)}
.rw-chest{background:var(--heat)}
.rw-chest .rw-i{background:rgba(12,12,12,.4)}
.rw-chest .rw-n,.rw-chest small,.rw-chest .rw-lk{color:rgba(243,240,235,.8)}
body.is-guest .rw-d.is-claimed,body.is-guest .rw-d.is-today{background:var(--char);box-shadow:none}
body.is-guest .rw-d.is-claimed .rw-v{color:var(--bone)}
body.is-guest .rw-d.is-claimed .rw-i{background:var(--char-2);color:var(--bone)}
.rw-tabs{margin-bottom:-4px}
.ms-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ms{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic b r" "ic b a";align-items:center;gap:8px 16px;min-width:0;padding:16px 20px;border-radius:var(--r-l);background:var(--char)}
.ms-ic{grid-area:ic;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--char-2);color:var(--bone)}
.ms-b{grid-area:b;display:grid;gap:3px;min-width:0}
.ms-b b{font-size:15px;font-weight:600;line-height:1.3}
.ms-b small{font-size:13px;color:var(--ash)}
.ms-p{display:flex;align-items:center;gap:10px;margin-top:6px}
.ms-p .prog{flex:1}
.ms-n{font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--ash)}
.ms-r{grid-area:r;justify-self:end}
.ms-a{grid-area:a;justify-self:end}
.ms-wait{display:inline-flex;align-items:center;height:32px;font-size:12px;color:var(--ash)}
.ms.is-done{box-shadow:inset 0 0 0 1px rgba(61,220,132,.35)}
.ms.is-done .prog>i{background:var(--ok)}
body.is-guest .ms .prog>i{width:0}
body.is-guest .ms.is-done{box-shadow:none}
.ch-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ch{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:16px;border-radius:var(--r-l);background:var(--char);color:inherit;text-decoration:none;transition:box-shadow .2s}
.ch:hover,.ch:focus-visible{box-shadow:inset 0 0 0 1.5px var(--flare);outline:none}
.ch .gc.sq{width:48px}
.ch-t{min-width:0}
.ch-t b{display:block;font-family:var(--display);font-size:13px;line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-t small{font-size:12px;color:var(--ash)}
.ch-x,.ch-m,.ch .prog,.ch-n{grid-column:1/-1}
.ch-x{display:flex;align-items:baseline;gap:8px}
.ch-x .mono{text-transform:uppercase;letter-spacing:.06em}
.ch-x b{font-family:var(--mono);font-size:28px;font-weight:500;line-height:1;letter-spacing:-.02em}
.ch-m{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ash)}
.ch-m b{font-family:var(--mono);font-weight:500;color:var(--bone)}
.ch-pz{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--char-2);font-family:var(--mono);font-size:14px;font-weight:500;color:var(--bone)}
.ch-n{font-size:11px}
.rf{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 24px}
.rf-t{display:grid;gap:4px;min-width:0}
.rf-t h2{font-size:17px}
.rf-t p{font-size:14px;color:var(--ash)}
.rf-a{display:grid;gap:8px;justify-items:end;min-width:0}
.rf-link{width:380px;max-width:100%;padding-right:4px}
.rf-link input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--mono);font-size:13px;color:var(--bone)}
.rf-s{font-size:11px}
.rw-terms{max-width:90ch}
@media (max-width:1100px){.ch-l{grid-template-columns:repeat(2,minmax(0,1fr))}.rw-cal{gap:8px}.rw-d small{display:none}.rw-chest small{display:block}}

/* ----- vip.html v3: heat-scale level chips, 5-level ladder, points, values table, level-up moment ----- */
.lv-c{display:inline-block;flex:none;width:10px;height:10px;margin:0 6px 1px 0;border-radius:50%;vertical-align:middle;background:var(--char-3);box-shadow:inset 0 0 0 1.5px var(--ash)}
.lv-c[data-lv="ember"]{background:var(--ember);box-shadow:none}
.lv-c[data-lv="flare"]{background:var(--flare);box-shadow:none}
.lv-c[data-lv="core"]{background:var(--core);box-shadow:0 0 8px rgba(255,197,107,.6)}
.lv-c[data-lv="plasma"]{background:var(--orb);box-shadow:0 0 10px rgba(255,241,214,.7)}
.vp-lvt{margin-top:4px}
.vp-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.vp-next>.mono{text-transform:uppercase;letter-spacing:.06em}
.vp-next ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vp-next li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:rgba(12,12,12,.4);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.vp-lv.vp-lv5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vp-lv5 .vl::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--lvc,transparent)}
.vp-lv5 .vl[data-lv="spark"]{--lvc:var(--char-3)}
.vp-lv5 .vl[data-lv="ember"]{--lvc:var(--ember)}
.vp-lv5 .vl[data-lv="flare"]{--lvc:var(--flare)}
.vp-lv5 .vl[data-lv="core"]{--lvc:var(--core)}
.vp-lv5 .vl-h>.mono{display:inline-flex;align-items:center}
.vp-lv5 .vl-ok{color:var(--ok);line-height:0}
.vp-lv5 .vl-sum b{font-size:18px}
body.is-guest .vp-lv5 .vl-ok{display:none}
.vp-earn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vp-earn li{display:grid;gap:10px;align-content:start;min-width:0;padding:20px;border-radius:var(--r-l);background:var(--char)}
.vp-earn b{font-size:15px;font-weight:600}
.vp-w{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--bone)}
.vp-earn small{font-size:12px;color:var(--ash)}
.seg.vt-pick{display:none}
.vtbl5 thead th:first-child{width:30%}
.vtbl5 td.v{font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.3;color:var(--bone);font-variant-numeric:tabular-nums}
.vtbl5 td.v::before{display:none}
.vtbl5 td.v small{display:block;margin-top:2px;font-size:10px;font-weight:400;color:var(--ash)}
.vtbl5 td.v[data-new]::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:var(--flare);vertical-align:middle}
.vtbl5 td.v[data-new]:has(small)::after{position:relative;top:-9px}
.vp-up{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px 36px;overflow:hidden;padding:32px 40px;background:radial-gradient(120% 160% at 0% 50%,rgba(255,241,214,.14),rgba(255,153,0,.08) 35%,var(--char) 70%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.18)}
.vp-orb{width:112px;height:112px;border-radius:50%;background:var(--orb);box-shadow:0 0 60px rgba(255,197,107,.55),0 0 0 10px rgba(255,241,214,.06);animation:vpPulse 3.2s ease-in-out infinite}
@keyframes vpPulse{50%{box-shadow:0 0 90px rgba(255,197,107,.75),0 0 0 16px rgba(255,241,214,.04)}}
.vp-up-t{display:grid;gap:10px;min-width:0}
.vp-up h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:clamp(24px,2.6vw,34px)}
.vp-up h2>svg{color:var(--ash)}
.vp-from{color:var(--ash)}
.vp-to{color:var(--core);text-shadow:0 0 22px rgba(255,197,107,.55)}
.vp-up-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.vp-up-v b{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.02em;color:var(--core);text-shadow:0 0 16px rgba(255,197,107,.7)}
.vp-up-v span{font-size:14px;color:var(--bone-2)}
.vp-unl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vp-unl li{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:rgba(12,12,12,.4);box-shadow:inset 0 0 0 1px rgba(255,241,214,.16);font-size:12px}
@media (max-width:1100px){.vp-earn{grid-template-columns:repeat(2,minmax(0,1fr))}.vp-lv.vp-lv5{grid-template-columns:repeat(5,minmax(0,1fr))}.vp-lv5 .vl{padding:18px 16px}.vp-lv5 .vl h3{font-size:16px}.vp-lv5 .vl-sum b{font-size:15px}}
@media (max-width:960px){.vp-lv.vp-lv5{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ----- phones (≤767) ----- */
@media (max-width:767px){
  /* jackpots: Mega full width, Major and Mini side by side */
  .jp-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .jp-mega{grid-column:1/-1}
  .jp{gap:4px;padding:12px 14px}
  .jp-h b{font-size:13px}
  .jp-v{font-size:17px}
  .jp-mega .jp-v{font-size:24px}
  .jp-m{font-size:11px}
  .jp-big .jp{padding:14px 16px;border-radius:22px}
  .jp-big .jp-mega{grid-row:auto;padding:20px}
  .jp-big .jp-mega .jp-v{font-size:34px}
  .jp-big .jp:not(.jp-mega) .jp-v{font-size:19px}
  .jp-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  [data-page="jackpots"] .ph-actions,[data-page="jackpots"] .ph-actions .btn{width:100%}
  /* tournaments */
  .tn-feat{min-height:0;padding:20px;gap:8px;border-radius:22px}
  .tn-feat>img{height:230px;top:90px;right:-80px;opacity:.4}
  .tn-feat .bn-p{display:none}
  .tn-feat-f{gap:10px 14px}
  .tn-feat .bn-cta{height:44px}
  .tn-l{grid-template-columns:minmax(0,1fr);gap:8px}
  .tn{gap:12px;padding:16px;border-radius:22px}
  .tn-n{font-size:16px}
  .tn-pool b{font-size:26px}
  .tn-cta{height:44px}
  .tn-tabs{gap:20px}
  /* tournament detail */
  .tn-d{gap:24px}
  .tn-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "time" "kv" "go";gap:14px;padding:20px;border-radius:22px}
  .tn-hero>img{height:260px;top:110px;right:-90px;opacity:.35}
  .tn-hero .tn-time{justify-self:start}
  .tn-hero .tn-go{justify-self:stretch}
  .tn-hero .tn-go .btn{width:100%}
  .tn-hero .bn-v{font-size:40px}
  .tn-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tn-stat .stat{padding:14px}
  .tn-stat .stat .v{font-size:20px}
  .tn-side{grid-template-columns:minmax(0,1fr)}
  .lb-wrap{margin-inline:-18px}
  .lb-t th{padding:8px 8px}
  .lb-t td{height:48px;padding:0 8px;font-size:13px}
  .lb-t .lb-p{width:48px;padding-left:14px}
  .lb-t .lb-s{width:78px;font-size:12px}
  .lb-t .lb-z{width:72px;padding-right:14px;font-size:12px}
  .lb-p span{min-width:26px;height:26px;font-size:11px}
  .lb-n .mono{font-size:12px}
  .lb-pin td{bottom:calc(var(--bnav-h) + 8px)}
  .lb .panel-h{flex-wrap:wrap}
  .gv-tn .timer{display:none}
  .gv-tn{grid-template-columns:auto minmax(0,1fr) auto}
  /* rewards */
  .rw .row-h{height:auto;min-height:20px;flex-wrap:wrap}
  .rw-cal{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .rw-chest{grid-column:span 2}
  .rw-d{gap:4px;padding:10px 4px 8px;border-radius:12px}
  .rw-i{width:32px;height:32px}
  .rw-v{font-size:14px}
  .rw-d .btn{width:100%;min-width:0;height:44px;padding:0 6px}
  .rw-d{overflow:hidden}
  .rw-got,.rw-lk{height:24px;font-size:11px}
  .ms-l{grid-template-columns:minmax(0,1fr);gap:8px}
  .ms{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic b r" "a a a";gap:10px 12px;padding:14px 16px;border-radius:22px}
  .ms-ic{width:40px;height:40px;align-self:start}
  .ms-b b{font-size:14px}
  .ms-r{align-self:start}
  .ms-a{justify-self:stretch}
  .ms .btn.ms-a{height:44px}
  .ms-wait,.ms .rw-got{justify-content:center;height:44px}
  .ch-l{display:flex;gap:8px;margin-inline:-16px;padding-inline:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
  .ch-l::-webkit-scrollbar{display:none}
  .ch{flex:none;width:78%;max-width:300px;scroll-snap-align:start;border-radius:22px}
  .rf{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .rf-a{grid-column:1/-1;justify-items:stretch}
  .rf-link{width:auto;height:48px}
  .rf-a .btn{height:44px}
  .rw-gst{padding:20px;min-height:0;border-radius:22px}
  .rw-gst>img{height:120%;right:-30%;opacity:.8}
  .rw-gst .bn-cta{height:44px}
  /* vip */
  .vp-next ul{gap:4px}
  .vp-next li{height:26px;padding:0 10px;font-size:12px}
  .vp-lv.vp-lv5{grid-template-columns:minmax(0,1fr);gap:6px}
  .vp-lv5 .vl{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 16px 12px 18px;border-radius:16px}
  .vp-lv5 .vl::before{top:0;bottom:0;right:auto;width:3px;height:auto}
  .vp-lv5 .vl-h{grid-column:1/-1}
  .vp-lv5 .vl h3{font-size:15px}
  .vp-lv5 .vl-sum{justify-items:end;text-align:right;gap:2px}
  .vp-lv5 .vl-sum b{font-size:14px}
  .vp-lv5 .vl-sum small{font-size:10px}
  .vp-lv5 .vl .prog{grid-column:1/-1}
  .vp-earn{grid-template-columns:minmax(0,1fr);gap:8px}
  .vp-earn li{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:14px 16px;border-radius:22px}
  .vp-earn .vpv-ic{grid-row:span 2;width:40px;height:40px}
  .vp-earn b{grid-column:2}
  .vp-earn small{grid-column:2;grid-row:2}
  .vp-earn .vp-w{grid-column:3;grid-row:1/span 2;font-size:15px}
  .vp-earn .prog{grid-column:1/-1;margin-top:6px}
  .seg.vt-pick{display:grid;padding:3px}
  .vt-pick>button{height:44px;padding:0 4px;font-size:13px}
  .vtbl5 thead th:not(:first-child){width:auto}
  .vtbl5 thead th:first-child{width:60%}
  .vtbl5 :is(th,td):nth-child(n+2){display:none}
  .vtbl5[data-col="1"] :is(th,td):nth-child(2),.vtbl5[data-col="2"] :is(th,td):nth-child(3),.vtbl5[data-col="3"] :is(th,td):nth-child(4),.vtbl5[data-col="4"] :is(th,td):nth-child(5),.vtbl5[data-col="5"] :is(th,td):nth-child(6){display:table-cell}
  .vtbl5 thead th{font-size:10px}
  .vtbl5 th:nth-child(n+2),.vtbl5 td{text-align:right;padding-right:16px}
  .vtbl5 td.v{font-size:14px}
  .vtbl5 td.v small{font-size:11px}
  .vp-up{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px;border-radius:22px}
  .vp-orb{width:56px;height:56px;align-self:start}
  .vp-up-v b{font-size:26px}
  .vp-prev{grid-column:1/-1;height:44px}
}
@media (max-width:380px){
  .lb-t .lb-s{width:70px}
  .lb-t .lb-z{width:64px}
  .tn-kv dd{font-size:12px}
  .rw-v{font-size:13px}
}
.rf-s b,.tn-feat-me .mono b{color:var(--bone)}

/* ---------- 37. EU MARKET (28.09.2026): EUR-only account, currency info sheet, "coming soon" languages (app.js DLG.currency, DLG.language) ---------- */
.opt-list .ol-fix{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px 0 10px;border-radius:var(--r-m);background:var(--char);font-size:14px;font-weight:500;color:var(--bone)}
.opt-list .ol-fix .ol-ic{background:var(--char-3)}
.opt-list .radio-row[aria-disabled="true"]{cursor:default;color:var(--ash)}
.opt-list .radio-row[aria-disabled="true"]:hover{background:none}
.opt-list .radio-row[aria-disabled="true"]::after{display:none}
.opt-list .radio-row[aria-disabled="true"] .ol-t b{color:var(--bone-2)}
.ol-soon{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ash)}

/* ---------- 38. PROVIDER LOGOS (29.09.2026; "37" was taken by EU MARKET). app.js Plazmo.provLogo(), COMPONENTS.md "Provider logo" ----------
   Figma "Provider" set 4025:1949, spec PRDO-2100. The logo keeps its normalised size inside a 160×60 box (--w = logo width / 160);
   where the tile is smaller the whole box scales down, so every logo keeps the same optical weight.
   Mono (white 32%) and colored are two stacked images in the same box: CROSSFADE by opacity, not filter. 150 ms in, 250 ms back.
   Hover only on devices that hover; on touch the logo stays mono and shows colour while pressed (:active). Keyboard focus also shows colour. */
.pv-logo{position:relative;display:block;flex:none;width:100%;max-width:160px;aspect-ratio:160/60;pointer-events:none}
.pv-logo img{position:absolute;left:50%;top:50%;width:var(--w);max-width:none;height:auto;translate:-50% -50%;transition:opacity .25s ease}
.pv-logo .c{opacity:0}
@media (hover:hover){
  :is(.pv,.pvf-r,.gv-prov):hover .pv-logo .c{opacity:1;transition-duration:.15s}
  :is(.pv,.pvf-r,.gv-prov):hover .pv-logo .m{opacity:0;transition-duration:.15s}
}
:is(.pv,.pvf-r,.gv-prov):active .pv-logo .c,
.pv:focus-visible .pv-logo .c,:is(.pvf-r,.gv-prov):has(:focus-visible) .pv-logo .c{opacity:1;transition-duration:.15s}
:is(.pv,.pvf-r,.gv-prov):active .pv-logo .m,
.pv:focus-visible .pv-logo .m,:is(.pvf-r,.gv-prov):has(:focus-visible) .pv-logo .m{opacity:0;transition-duration:.15s}
/* filter list: the logo cell clamps text wordmarks; the logo box needs none of that (112px cell → 96×36 box) */
.pvf-lg>.pv-logo{display:block;overflow:visible;line-height:0;-webkit-line-clamp:none}
/* game page provider card: a 96×36 box in the 40px-tall logo chip */
.gv-logo>.pv-logo{width:96px}

/* ---------- 40. OWN FACE B (29.09.2026): bonuses, promo, promo-one, vip, tournaments, tournament, jackpots, rewards (= "Heat") ----------
   Scope: main.ofb (a class on <main> of these eight pages) + their own new classes; the lobby and other pages are untouched.
   Heat vocabulary: zones [data-z] cold | ember | flare | core, outlined numerals (lobby Top 10), mono micro-labels,
   Core glow only on peaks. Motion = slow glows, pulses and drifts; ?still and reduced motion stop them (section 22).
   Markup and behaviour: COMPONENTS.md section 13 "Own face B"; logic in assets/js/retention.js. */
.ofb{--z-ember:color-mix(in srgb,var(--ember) 55%,var(--flare))}
.ofb [data-z]{--zc:var(--line-3)}
.ofb [data-z="ember"]{--zc:var(--z-ember)}
.ofb [data-z="flare"]{--zc:var(--flare)}
.ofb [data-z="core"]{--zc:var(--core)}

/* one Flare per view: in these pages every action is Bone; the header Deposit (player) or Sign up (guest) stays the Flare */
.ofb .btn.hot{background:var(--bone);color:var(--soot)}
.ofb .btn.hot:hover{background:#fff}
/* section headings at the lobby row-heading size */
.ofb .panel-h h2{font-size:17px;letter-spacing:0}
/* press feedback on whole-card links */
.ofb :is(a.offer,a.jp,a.ch,a.bn,.tn){transition:box-shadow .2s,transform .12s var(--ease)}
.ofb :is(a.offer,a.jp,a.ch,a.bn):active,.ofb .tn:has(.tn-a:active){transform:scale(.985)}
/* progress: a glowing tip where the heat is */
.ofb .prog>i::after{content:"";position:absolute;right:0;top:50%;width:12px;height:12px;translate:40% -50%;border-radius:50%;background:radial-gradient(circle,var(--core) 0 18%,rgba(255,153,0,.55) 42%,transparent 70%);animation:ofbTip 2.4s ease-in-out infinite;pointer-events:none}
.ofb .prog>i[style*="--v:0%"]::after,body.is-guest .ofb .ms .prog>i::after{display:none}
@keyframes ofbTip{50%{opacity:.5}}
/* empty states: a cold ember under the icon */
.ofb :is(.empty,.bnp-none) .e-ic{background:radial-gradient(circle at 50% 130%,rgba(142,21,4,.55),var(--char-2) 70%);color:var(--bone-2)}

/* ----- outlined place numeral (tournaments): stroke = zone colour, Core zone fills and glows ----- */
.ofb .tn-pl{display:inline-flex;align-items:baseline;flex:none;font-family:var(--display);font-weight:700;font-size:34px;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--zc);font-variant-numeric:tabular-nums}
.ofb .tn-pl small{margin-right:3px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--ash);-webkit-text-stroke:0}
.ofb .tn-pl[data-z="core"]{color:var(--core);text-shadow:0 0 18px rgba(255,197,107,.6)}

/* ----- tournaments.html: featured board ----- */
.tn-feat-live{display:inline-flex;align-items:center;gap:6px;height:20px;margin-right:10px;padding:0 8px;border-radius:var(--r-pill);background:rgba(12,12,12,.45);color:var(--ok);letter-spacing:.06em}
.tn-feat-live>i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:onair 1.6s ease-out infinite}
.ofb .tn-feat{min-height:240px;padding:32px 96px 32px 40px}
.ofb .tn-feat .bn-v{font-size:clamp(40px,4vw,56px)}
.ofb .tn-feat-f{gap:14px 28px;margin-top:10px}
.ofb .tn-feat-me{display:inline-flex;align-items:center;gap:12px}
.ofb .tn-feat-me .tn-pl{font-size:40px;-webkit-text-stroke-color:var(--bone)}
.ofb .tn-feat-me b{display:block;font-family:var(--mono);font-size:16px;font-weight:500;line-height:1.2;color:var(--bone)}
.ofb .tn-feat-me small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:rgba(243,240,235,.78)}
.ofb .tn-feat-me .mono{font-size:11px;color:rgba(243,240,235,.8);letter-spacing:.04em;text-transform:none}
.ofb .bn .go.tn-go-a,.ofb .vp-cb2 .go{position:absolute;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(243,240,235,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--bone);transition:background-color .2s,color .2s,rotate .3s var(--ease)}
.ofb a.bn:hover .go{background:var(--bone);color:var(--soot);rotate:45deg}

/* ----- tournament card: kind line, pool headline, burn line (time gone), heat that grows as the tournament burns ----- */
.ofb .tn{gap:12px;background:radial-gradient(110% 80% at 100% 100%,rgba(142,21,4,calc(var(--burn,0) * .42)),transparent 62%),var(--char)}
.ofb .tn-done{background:var(--char)}
.ofb .tn-vip{background:radial-gradient(90% 90% at 100% 0%,rgba(255,241,214,.09),transparent 60%),var(--char);box-shadow:inset 0 0 0 1px rgba(255,241,214,.14)}
.ofb .tn-top{min-height:24px}
.ofb .tn-k{display:inline-flex;align-items:center;gap:8px;min-width:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofb .tn-k>svg{flex:none;color:var(--bone-2)}
.ofb .tn-top .tn-club{margin-left:auto;height:22px;font-size:11px}
.ofb .tn-top .tn-club~*{margin-left:0}
.ofb .tn-n{font-size:15px;color:var(--bone-2);margin-top:4px}
.ofb .tn-pool b{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.02em;line-height:.95}
.ofb .tn-on .tn-pool b{text-shadow:0 0 22px rgba(255,153,0,.18)}
.ofb .tn-done .tn-pool b{color:var(--ash)}
.tn-burn{position:relative;height:3px;border-radius:var(--r-pill);background:var(--char-3)}
.tn-burn>i{position:absolute;inset:0 auto 0 0;width:calc(var(--burn,0) * 100%);border-radius:inherit;background:var(--heat-bar);background-size:calc(100% / max(var(--burn,1),.05)) 100%}
.tn-burn>i::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;translate:0 -50%;border-radius:50%;background:var(--core);box-shadow:0 0 10px 2px rgba(255,153,0,.7);animation:ofbTip 2.4s ease-in-out infinite}
.tn-done .tn-burn>i{background:var(--line-2)}
.tn-done .tn-burn>i::after,.tn-soon .tn-burn>i::after{display:none}
.ofb .tn-me{gap:12px}
.ofb .tn-me b{font-size:13px}
.ofb .tn-me .tn-pl{font-size:34px}
.ofb .tn:has(.tn-a:hover){transform:translateY(-2px)}

/* ----- tournament.html: hero time + burn, "Your temperature" scale, heat-scale leaderboard ----- */
.ofb .tn-hero .tn-time-w{grid-area:time;display:grid;gap:12px;justify-self:start;width:min(100%,380px)}
.ofb .tn-hero .tn-time{grid-area:auto}
.ofb .tn-hero .tn-burn{background:rgba(12,12,12,.4)}
.ofb .tn-stat.has-tz{display:block}
.tz{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:14px;padding:24px 28px 22px;border-radius:var(--r-l);background:radial-gradient(70% 140% at 100% 0%,rgba(255,153,0,.10),transparent 60%),var(--char)}
.tz-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-width:0}
.tz-read{display:grid;gap:6px;min-width:0}
.tz-deg{font-family:var(--display);font-weight:700;font-size:clamp(40px,4vw,56px);line-height:.88;letter-spacing:-.03em;color:var(--zc);text-shadow:0 0 28px color-mix(in srgb,var(--zc) 40%,transparent)}
.tz-z{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2)}
.tz-me{display:grid;justify-items:end;gap:6px}
.ofb .tz-me .tn-pl{font-size:56px}
.tz-me>small{font-family:var(--mono);font-size:11px;color:var(--ash)}
.tz-sc{position:relative;height:36px;margin-top:6px;border-radius:10px;background:var(--heat-full);box-shadow:inset 0 0 0 1px var(--line)}
.tz-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:10px;border-left:1px solid rgba(12,12,12,.55);overflow:hidden}
.tz-seg:first-child{border-left:0}
.tz-seg em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(243,240,235,.7)}
.tz-seg:is([data-z="flare"],[data-z="core"]) em{color:rgba(12,12,12,.72)}
.tz-mk{position:absolute;top:-8px;bottom:-8px;left:var(--x);width:2px;translate:-1px 0;border-radius:2px;background:var(--bone);box-shadow:0 0 12px rgba(255,241,214,.9)}
.tz-mk>i{position:absolute;left:50%;top:-4px;width:12px;height:12px;translate:-50% 0;border-radius:50%;background:var(--bone);animation:ofbRing 2s ease-out infinite}
@keyframes ofbRing{0%{box-shadow:0 0 0 0 rgba(243,240,235,.5)}100%{box-shadow:0 0 0 10px rgba(243,240,235,0)}}
.tz-ax{position:relative;height:14px;font-family:var(--mono);font-size:10px;color:var(--ash)}
.tz-ax span{position:absolute;top:0;translate:-50% 0;white-space:nowrap}
.tz-ax span:first-child{translate:0 0}
.tz-ax span:last-child{translate:-100% 0}
.tz-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.tz-r dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.tz-r dd{margin:4px 0 0;font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tz-r dd small{display:block;margin-top:3px;font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:0;color:var(--ash)}
.tz-r dd small b{font-family:var(--mono);font-weight:500;color:var(--bone)}
/* leaderboard: outlined place numerals, heat-coloured by zone; a 2 px temperature edge on every row */
.ofb .lb-t td.lb-p{padding-top:2px}
.ofb .lb-p span{min-width:0;height:auto;padding:0;border-radius:0;background:none!important;box-shadow:none!important;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;color:transparent!important;-webkit-text-stroke:1px var(--zc,var(--line-3));text-shadow:none}
.ofb .lb-r.top1 .lb-p span{color:var(--core)!important;-webkit-text-stroke:0;text-shadow:0 0 14px rgba(255,197,107,.75)}
.ofb .lb-r.top2 .lb-p span{color:var(--flare)!important;-webkit-text-stroke:0}
.ofb .lb-r.top3 .lb-p span{color:var(--z-ember)!important;-webkit-text-stroke:0}
.ofb .lb-r.is-me .lb-p span{-webkit-text-stroke-color:var(--bone)}
.ofb .lb-r:not(.is-me) td:first-child{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--zc) 70%,transparent)}
.ofb .lb-r[data-z="cold"]:not(.is-me) td:first-child{box-shadow:none}
.ofb .lb-t tbody tr:not(.is-me):hover td{background:rgba(243,240,235,.03)}
.ofb .lb-empty .e-ic{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ----- rewards.html = Heat: the 7-day meter ----- */
.hm{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:18px;padding:24px;border-radius:var(--r-l);background:radial-gradient(55% 120% at 100% 100%,rgba(255,241,214,.09),rgba(255,153,0,.05) 40%,transparent 70%),var(--char)}
.hm-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.hm-read{display:grid;gap:12px;min-width:0}
.hm-deg{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.hm-deg b{font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,72px);line-height:.85;letter-spacing:-.03em;color:var(--flare);text-shadow:0 0 28px rgba(255,153,0,.35)}
.hm-deg span{font-family:var(--mono);font-size:12px;color:var(--ash)}
.hm-deg em{font-style:normal;color:var(--core)}
body.is-guest .hm-deg b{color:transparent;-webkit-text-stroke:1.2px var(--line-3);text-shadow:none}
.ofb .hm-cal{position:relative;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding-bottom:20px}
.hm-cal::before,.hm-cal::after{content:"";position:absolute;left:0;bottom:0;height:6px;border-radius:var(--r-pill)}
.hm-cal::before{right:0;background:var(--char-3)}
.hm-cal::after{width:calc(var(--hm,0) / 7 * 100%);background:var(--heat-full) 0 0/calc(100% * 7 / max(var(--hm,1),1)) 100%;box-shadow:0 0 14px rgba(255,153,0,.45);transition:width .8s var(--ease)}
body.is-guest .hm-cal::after{width:0}
.ofb .hm-cal .rw-d{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:156px;padding:14px 12px 12px;border-radius:var(--r-m);background:var(--char-2);text-align:left;overflow:hidden;transition:background .6s,box-shadow .3s}
.ofb .hm-cal .rw-n{font-family:var(--display);font-weight:700;font-size:32px;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.1px var(--line-3);text-transform:none}
.ofb .hm-cal .rw-t{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ash)}
.ofb .hm-cal .rw-v{margin-top:6px;font-size:16px}
.ofb .hm-cal .rw-d small{min-height:0;font-size:11px}
.ofb .hm-cal :is(.rw-got,.rw-lk,.rw-now){margin-top:auto;height:24px;font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.rw-now{display:inline-flex;align-items:center;color:var(--flare)}
/* heated days: the cell takes its slice of the heat scale and the numeral turns solid (a change of state) */
.ofb .hm-cal .rw-d.is-claimed{background:var(--heat-full) var(--sl,0%) 0/700% 100%}
.ofb .hm-cal .rw-d:nth-child(2){--sl:16.67%}.ofb .hm-cal .rw-d:nth-child(3){--sl:33.33%}.ofb .hm-cal .rw-d:nth-child(4){--sl:50%}.ofb .hm-cal .rw-d:nth-child(5){--sl:66.67%}.ofb .hm-cal .rw-d:nth-child(6){--sl:83.33%}.ofb .hm-cal .rw-d:nth-child(7){--sl:100%}
.ofb .hm-cal .rw-d.is-claimed .rw-n{color:var(--bone);-webkit-text-stroke:0}
.ofb .hm-cal .rw-d.is-claimed :is(.rw-t,small){color:rgba(243,240,235,.72)}
.ofb .hm-cal .rw-d.is-claimed .rw-v{color:var(--bone)}
.ofb .hm-cal .rw-d.is-claimed .rw-got{color:var(--bone)}
.ofb .hm-cal .rw-d.is-claimed .rw-i{display:none}
.ofb .hm-cal .rw-d.is-today{background:radial-gradient(120% 90% at 50% 100%,rgba(255,153,0,.22),var(--char-2) 70%);box-shadow:inset 0 0 0 1.5px var(--flare);animation:ofbBreath 3s ease-in-out infinite}
.ofb .hm-cal .rw-d.is-today .rw-n{-webkit-text-stroke-color:var(--flare)}
@keyframes ofbBreath{50%{box-shadow:inset 0 0 0 1.5px var(--flare),0 0 24px -4px rgba(255,153,0,.55)}}
/* day 7: the Core, the peak of the page */
.ofb .hm-cal .rw-chest{background:radial-gradient(110% 80% at 50% 0%,rgba(255,241,214,.20),rgba(255,153,0,.10) 45%,var(--char-2) 80%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.32)}
.ofb .hm-cal .rw-chest .rw-n{-webkit-text-stroke-color:var(--core)}
.ofb .hm-cal .rw-chest .rw-t{color:var(--core)}
.ofb .hm-cal .rw-chest .rw-v{color:var(--core);text-shadow:0 0 14px rgba(255,197,107,.6)}
.ofb .hm-cal .rw-chest :is(small,.rw-lk){color:rgba(243,240,235,.8)}
.ofb .hm-cal .rw-chest.is-claimed{background:var(--heat-full) 100% 0/700% 100%}
.ofb .hm-cal .rw-chest.is-claimed :is(.rw-n,.rw-v,.rw-t,small,.rw-got){color:var(--soot);text-shadow:none}
body.is-guest .ofb .hm-cal .rw-d{background:var(--char-2);box-shadow:none;animation:none}
body.is-guest .ofb .hm-cal .rw-d .rw-n{color:transparent;-webkit-text-stroke:1.1px var(--line-3)}
body.is-guest .ofb .hm-cal .rw-chest{background:radial-gradient(110% 80% at 50% 0%,rgba(255,241,214,.14),var(--char-2) 70%)}
/* today strip: the one action of the meter */
.hm-today{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 12px 12px 14px;border-radius:var(--r-m);background:rgba(12,12,12,.45);box-shadow:inset 0 0 0 1px rgba(255,153,0,.26)}
.hm-ti{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--heat);color:var(--bone);box-shadow:0 0 18px -2px rgba(255,153,0,.45)}
.hm-tt{display:grid;gap:2px;min-width:0}
.hm-tt .mono{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.hm-tt b{font-size:16px;font-weight:600}
.hm-tt small{font-size:13px;color:var(--ash)}
.hm-claim{height:44px;min-width:120px}
.hm-today.is-claimed{box-shadow:inset 0 0 0 1px var(--line-2)}
.hm-today.is-claimed .hm-ti{background:var(--char-2);box-shadow:none}
.hm-today .rw-got{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 8px;font-size:13px;color:var(--ok)}
.hm-reset{align-self:start}
/* missions: a burner icon, reward as an outlined chip, a finished mission is a peak (Core) */
.ofb .ms{background:radial-gradient(80% 120% at 0% 100%,rgba(142,21,4,.16),transparent 60%),var(--char)}
.ofb .ms-ic{border-radius:14px;background:radial-gradient(circle at 50% 130%,rgba(142,21,4,.65),var(--char-2) 70%)}
.ofb .ms-r{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,153,0,.35);color:var(--bone)}
.ofb .ms-r::before{content:"+";margin-right:-2px;color:var(--flare)}
.ofb .ms.is-done{background:radial-gradient(90% 140% at 100% 0%,rgba(255,241,214,.12),rgba(255,153,0,.06) 45%,var(--char) 75%);box-shadow:inset 0 0 0 1px rgba(255,241,214,.3)}
.ofb .ms.is-done .prog>i{background:var(--heat-bar);box-shadow:0 0 10px rgba(255,153,0,.5)}
.ofb .ms.is-done .ms-r{box-shadow:inset 0 0 0 1px rgba(255,241,214,.5);color:var(--core)}
.ofb .ms.is-claimed{background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
body.is-guest .ofb .ms.is-done{background:var(--char);box-shadow:none}
/* Flashpoints: the target multiplier as an outlined numeral that flashes Core on hover, prizes left as fuel cells */
.ofb .ch{background:radial-gradient(90% 80% at 100% 0%,rgba(255,153,0,.07),transparent 60%),var(--char)}
.ofb .ch-x b{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px rgba(243,240,235,.6);transition:color .25s,text-shadow .25s,-webkit-text-stroke-color .25s}
.ofb a.ch:is(:hover,:focus-visible) .ch-x b{color:var(--core);-webkit-text-stroke-color:var(--core);text-shadow:0 0 18px rgba(255,197,107,.7)}
.fp-c{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;height:8px}
.fp-c i{border-radius:2px;background:var(--char-3)}
.fp-c i.on{background:linear-gradient(180deg,var(--flare-hi),var(--flare));box-shadow:0 0 6px -1px rgba(255,153,0,.7)}
.ch.is-low .fp-c i.on{animation:ofbFlicker 1.4s ease-in-out infinite}
.ch.is-low .fp-c i.on:nth-child(2){animation-delay:.3s}.ch.is-low .fp-c i.on:nth-child(3){animation-delay:.6s}
@keyframes ofbFlicker{50%{opacity:.45}}
.ofb .ch-pz{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ----- jackpots.html: three states of matter (Liquid, Gas, Plasma) on one heat line ----- */
.ofb .jp-states{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.55fr);align-items:stretch}
.ofb .jp-states .jp{grid-row:auto;align-content:end;gap:10px;min-height:300px;padding:24px 26px;border-radius:var(--r-l)}
.ofb .jp-states .jp::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--st-line,var(--ember))}
.ofb .jp-states .jp-mini{--st-line:var(--ember);background:radial-gradient(90% 70% at 100% 0%,rgba(142,21,4,.35),transparent 65%),var(--char)}
.ofb .jp-states .jp-major{--st-line:var(--flare);background:radial-gradient(90% 70% at 100% 0%,rgba(255,153,0,.16),transparent 65%),var(--char)}
.ofb .jp-states .jp-mega{--st-line:var(--core);padding:28px 32px;background:radial-gradient(80% 110% at 100% 0%,rgba(255,241,214,.20),rgba(255,153,0,.10) 40%,var(--char) 78%)}
.ofb .jp-states .jp-mega .jp-v{font-size:clamp(32px,3.3vw,50px)}
.ofb .jp-states .jp:not(.jp-mega) .jp-v{font-size:clamp(22px,1.9vw,30px)}
.jp-st{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.jp-mega .jp-st{color:var(--core)}
.ofb .jp-states .jp-h b{font-size:17px}
.ofb .jp-states .jp-mega .jp-h .tag{margin-left:10px}
.jp-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.jp-prv{font-family:var(--mono);font-size:11px;color:var(--bone-2)}
/* the specimens */
.jp-mat{position:absolute;right:22px;top:22px;z-index:-1;pointer-events:none;transition:scale .5s var(--ease)}
.ofb a.jp:hover .jp-mat{scale:1.08}
.jp-mini .jp-mat{width:78px;height:78px}
.jp-mini .jp-mat>i{position:absolute;inset:6px;border-radius:58% 42% 55% 45%/48% 60% 40% 52%;background:radial-gradient(circle at 34% 30%,var(--core) 0 4%,var(--flare-hi) 12%,var(--flare) 30%,var(--ember) 70%,var(--oxide) 100%);box-shadow:0 0 34px rgba(255,153,0,.35),inset -6px -8px 14px rgba(66,8,4,.7);animation:ofbMorph 7s ease-in-out infinite}
.jp-mini .jp-mat::after{content:"";position:absolute;left:4px;right:4px;bottom:-10px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,153,0,.35),transparent)}
@keyframes ofbMorph{33%{border-radius:45% 55% 48% 52%/58% 42% 58% 42%}66%{border-radius:52% 48% 40% 60%/45% 55% 45% 55%}}
.jp-major .jp-mat{width:120px;height:96px;right:10px;top:10px}
.jp-major .jp-mat>i{position:absolute;border-radius:50%;filter:blur(14px);animation:ofbDrift 9s ease-in-out infinite}
.jp-major .jp-mat>i:nth-child(1){left:10px;top:18px;width:62px;height:62px;background:rgba(255,153,0,.45)}
.jp-major .jp-mat>i:nth-child(2){left:48px;top:4px;width:54px;height:54px;background:rgba(142,21,4,.7);animation-delay:-3s}
.jp-major .jp-mat>i:nth-child(3){left:40px;top:38px;width:48px;height:48px;background:rgba(255,241,214,.18);animation-delay:-6s}
@keyframes ofbDrift{50%{translate:10px -6px;scale:1.15}}
.jp-mega .jp-mat{width:150px;height:150px;right:30px;top:26px}
.jp-mega .jp-mat>i{position:absolute;inset:0;border-radius:50%;background:var(--orb);box-shadow:0 0 70px rgba(255,197,107,.55),0 0 0 14px rgba(255,241,214,.05);animation:vpPulse 3.2s ease-in-out infinite}
.jp-mega .jp-mat::before{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px dashed rgba(255,241,214,.22);animation:ofbSpin 40s linear infinite}
@keyframes ofbSpin{to{rotate:360deg}}
.ofb .jp-states .jp-mega .jp-h,.ofb .jp-states .jp-mega .jp-v,.ofb .jp-states .jp-mega .jp-m{max-width:calc(100% - 20px)}
/* winners: the state as the chip */
.jp-sc[data-s="liquid"]{background:rgba(142,21,4,.4);color:var(--bone)}
.jp-sc[data-s="gas"]{background:rgba(255,153,0,.12);color:var(--flare-hi)}
.jp-sc[data-s="plasma"]{background:rgba(255,241,214,.08);box-shadow:inset 0 0 0 1px rgba(255,241,214,.4);color:var(--core)}

/* ----- vip.html: the ladder is one heating line (a spark, an ember, a flare, the Core, plasma) ----- */
.ofb .vip-pct{display:flex;align-items:baseline;gap:8px}
.vip-pct-n{font-family:var(--display);font-weight:700;font-size:clamp(56px,6vw,88px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--flare);text-shadow:0 0 30px rgba(255,153,0,.25)}
.ofb .vip-pct small{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ash)}
.vh{--vh:0;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vh::before,.vh::after{content:"";position:absolute;top:30px;height:4px;border-radius:var(--r-pill);left:calc((100% - 48px) / 10)}
.vh::before{right:calc((100% - 48px) / 10);background:var(--char-3)}
.vh::after{width:calc(var(--vh) / 4 * (80% + 9.6px));background:linear-gradient(90deg,var(--ember),var(--flare));box-shadow:0 0 14px rgba(255,153,0,.5)}
body.is-guest .vh{--vh:0}
.vh-s{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;padding:76px 8px 20px;border-radius:var(--r-l);text-align:center}
.vh-o{position:absolute;left:50%;top:0;width:64px;height:64px;translate:-50% 0;display:grid;place-items:center;z-index:1}
.vh-o>i{display:block;border-radius:50%;transition:opacity .4s}
.vh-s[data-lv="spark"] .vh-o>i{width:12px;height:12px;background:var(--core);box-shadow:0 0 10px 3px rgba(255,153,0,.65)}
.vh-s[data-lv="ember"] .vh-o>i{width:22px;height:22px;background:radial-gradient(circle at 38% 34%,var(--flare) 0,var(--ember) 55%,var(--oxide) 100%);box-shadow:0 0 16px rgba(142,21,4,.9)}
.vh-s[data-lv="flare"] .vh-o>i{width:32px;height:32px;background:radial-gradient(circle at 40% 36%,var(--core) 0,var(--flare) 38%,var(--ember) 100%);box-shadow:0 0 22px rgba(255,153,0,.6)}
.vh-s[data-lv="core"] .vh-o>i{width:42px;height:42px;background:radial-gradient(circle at 42% 38%,#fff 0,var(--core) 30%,var(--flare-hi) 70%,var(--flare) 100%);box-shadow:0 0 30px rgba(255,197,107,.7)}
.vh-s[data-lv="plasma"] .vh-o>i{width:54px;height:54px;background:var(--orb);box-shadow:0 0 40px rgba(255,197,107,.7),0 0 0 8px rgba(255,241,214,.05);animation:vpPulse 3.2s ease-in-out infinite}
/* not reached yet: the body is still cold */
.vh-s:not(.is-done):not(.is-now) .vh-o>i{opacity:.32;filter:saturate(.6)}
.vh-s.is-next .vh-o>i{opacity:.7}
body.is-guest .vh-s:not([data-lv="spark"]) .vh-o>i{opacity:.32}
.vh-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.vh-s h3{font-size:20px;line-height:1.05}
.vh-s.top h3{background:var(--heat-full) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.vh-sum{display:grid;gap:2px}
.vh-sum b{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.vh-sum small{font-family:var(--mono);font-size:10px;color:var(--ash)}
.vh-st{display:inline-flex;align-items:center;gap:6px;height:26px;margin-top:4px;padding:0 10px;border-radius:var(--r-pill);font-family:var(--mono);font-size:11px;color:var(--ash)}
.vh-st b{color:var(--bone);font-weight:500}
.vh-s.is-done .vh-st{color:var(--ok)}
.vh-you{box-shadow:inset 0 0 0 1px var(--flare);color:var(--bone)!important}
.vh-s.is-now{background:radial-gradient(70% 55% at 50% 20%,rgba(255,153,0,.13),transparent 70%)}
body.is-guest .vh-s.is-now{background:none}
/* benefits table: the withdrawal limit climbs with every level */
.ofb .vtbl5 tr.vt-lim>*{background:rgba(255,153,0,.035)}
.ofb .vtbl5 tr.vt-lim td[data-up]::after{content:"";display:inline-block;width:11px;height:11px;margin-left:6px;vertical-align:0;background:var(--flare);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.ofb .vtbl5 tr.vt-lim td:last-child{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.5)}
/* weekly cashback: the rate heating up by level (bars), the whole card is the link */
.ofb .vp-cb2{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:24px 48px;padding-right:96px}
.ofb .vp-cb2 .bn-t{flex:0 1 380px}
.ofb .vp-cb2 .bn-h{font-size:clamp(20px,2vw,26px)}
.cb-bars{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:10px;height:150px}
.cb-bars li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;width:48px;height:100%}
.cb-bars li b{font-family:var(--mono);font-size:13px;font-weight:500}
.cb-bars li i{width:100%;height:calc(var(--h) * .72);border-radius:8px 8px 3px 3px;background:var(--char-3)}
.cb-bars li span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:rgba(243,240,235,.7)}
.cb-bars [data-lv="ember"] i{background:var(--ember)}
.cb-bars [data-lv="flare"] i{background:var(--flare)}
.cb-bars [data-lv="core"] i{background:var(--core);box-shadow:0 0 16px rgba(255,197,107,.5)}
.cb-bars [data-lv="plasma"] i{background:var(--orb);box-shadow:0 0 22px rgba(255,197,107,.6)}
.cb-bars [data-lv="plasma"] b{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.6)}

/* ----- welcome pack (bonuses guest, promotions featured): three rising heat stages, not one huge number + a full-width button ----- */
.ofb .bn.wh{display:grid;grid-template-columns:minmax(0,1fr);align-content:end;justify-items:start;gap:16px;min-height:280px;padding:28px 32px}
.ofb .wh .bn-t{gap:8px}
.ofb .wh .bn-h{font-size:clamp(18px,1.7vw,24px);line-height:1.08;max-width:20ch}
.ofb .bn.hero.wh>img{right:-10%;height:150%}
.wh-s{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:8px;width:min(100%,480px)}
.wh-s li{--sc:var(--ember);flex:1;display:grid;gap:4px;align-content:end;min-width:0;min-height:96px;padding:12px 14px;border-radius:var(--r-m);background:rgba(12,12,12,.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 2px 0 var(--sc)}
.wh-s li:nth-child(2){--sc:var(--flare);min-height:116px}
.wh-s li.pk{--sc:var(--core);min-height:136px;box-shadow:inset 0 2px 0 var(--sc),0 0 30px -8px rgba(255,197,107,.45)}
.wh-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,240,235,.72)}
.wh-s b{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:.9;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.1px rgba(243,240,235,.75)}
.wh-s li:nth-child(2) b{-webkit-text-stroke-color:var(--flare-hi)}
.wh-s li.pk b{color:var(--core);-webkit-text-stroke:0;text-shadow:0 0 18px rgba(255,197,107,.6)}
.wh-s small{font-family:var(--mono);font-size:11px;color:rgba(243,240,235,.84)}
.wh-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.wh-t{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:rgba(243,240,235,.8)}
.ofb .wh .bn-cta{margin:0}

/* ----- bonuses.html: active bonus = a burn-in: wagering % as an outlined numeral, a faint ember glow that grows with it ----- */
.ofb .bact>.panel{background:radial-gradient(70% 90% at 100% 100%,rgba(142,21,4,.28),transparent 65%),var(--char)}
.ofb .bact-pr .ph-l b{font-family:var(--display);font-weight:700;font-size:44px;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--flare)}
.ofb .bact-side .stat:first-child .v{color:var(--bone)}

/* ----- offer cards (bonuses, promotions, promo detail), tablet and desktop: mono label, outlined value that heats up on hover, heat hairline ----- */
@media (min-width:768px){
  .ofb .offer .of-art .tag{top:16px;left:18px;height:auto;padding:0;gap:6px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,240,235,.86)}
  .ofb .offer .of-art .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bone);box-shadow:0 0 8px rgba(243,240,235,.6)}
  .ofb .offer .of-v{font-size:36px;color:transparent;-webkit-text-stroke:1.2px var(--bone);transition:color .3s,text-shadow .3s,-webkit-text-stroke-color .3s}
  .ofb .offer .of-v small{color:rgba(243,240,235,.8);-webkit-text-stroke:0}
  .ofb .offer:is(:hover,:focus-within) .of-v{color:var(--core);-webkit-text-stroke-color:var(--core);text-shadow:0 0 20px rgba(255,197,107,.55)}
  .ofb .offer .of-art::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:2px;background:var(--heat-bar);transform:scaleX(.16);transform-origin:left;transition:transform .6s var(--ease)}
  .ofb .offer:is(:hover,:focus-within) .of-art::after{transform:scaleX(1)}
  .ofb article.offer:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
}

/* ----- promo-one.html: sticky action bar on phones ----- */
.po-bar{display:none}

/* ----- tablets ----- */
@media (max-width:1100px){
  .ofb .jp-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ofb .jp-states .jp-mega{grid-column:1/-1;order:-1;min-height:260px}
  .ofb .jp-states .jp{min-height:220px}
  .tz-r{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vh-s h3{font-size:16px}
  .ofb .hm-cal{gap:6px}
  .ofb .hm-cal .rw-d{padding:12px 8px 10px;min-height:136px}
  .ofb .hm-cal .rw-d small{display:none}
  .ofb .hm-cal .rw-n{font-size:26px}
  .ofb .vp-cb2{padding-right:88px}
  .ofb .vp-cb2.bn.card>img{opacity:.45}
  .vh-x{display:none}
}

/* ----- phones (≤767) ----- */
@media (max-width:767px){
  .ofb .tn-pl{font-size:28px}
  /* tournaments */
  .ofb .tn-feat{min-height:0;padding:20px 20px 20px}
  .ofb .tn-feat .bn-v{font-size:38px}
  .ofb .tn-feat .bn-v small{font-size:11px}
  .ofb .tn-feat-f{gap:12px 16px;margin-top:6px}
  .ofb .tn-feat-me .tn-pl{font-size:32px}
  .ofb .bn .go.tn-go-a{right:16px;bottom:16px;width:44px;height:44px}
  .ofb .tn-feat .tn-feat-f{padding-right:52px}
  .ofb .tn-pool b{font-size:28px}
  .ofb .tn-me .tn-pl{font-size:30px}
  .ofb .bact-pr .ph-l b{font-size:34px}
  /* tournament detail */
  .tz{padding:18px 16px 16px;gap:12px;border-radius:22px}
  .tz-deg{font-size:40px}
  .ofb .tz-me .tn-pl{font-size:42px}
  .tz-sc{height:30px}
  .tz-seg{padding-left:6px}
  .tz-seg em{font-size:9px;letter-spacing:.02em}
  .tz-r{gap:8px}
  .tz-r dd{font-size:16px}
  .tz-r dd small{font-size:11px}
  .ofb .lb-p span{font-size:17px}
  .ofb .lb-t .lb-z{width:84px}
  .ofb .lb-t .lb-s{width:70px}
  .ofb .tn-hero .tn-time-w{width:100%}
  /* Heat meter: seven slim cells, the meter reads in one line */
  .hm{padding:16px;gap:14px;border-radius:22px}
  .hm-deg b{font-size:48px}
  .ofb .hm-cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding-bottom:16px}
  .ofb .hm-cal .rw-chest{grid-column:auto}
  .hm-cal::before,.hm-cal::after{height:5px}
  .ofb .hm-cal .rw-d{align-items:center;text-align:center;min-height:96px;padding:10px 2px 8px;gap:3px;border-radius:12px}
  .ofb .hm-cal .rw-n{font-size:20px}
  .ofb .hm-cal .rw-t{display:none}
  .ofb .hm-cal .rw-v{margin-top:4px;font-size:11px;line-height:1.15}
  .ofb .hm-cal :is(.rw-got,.rw-lk){height:18px;font-size:0;gap:0}
  .ofb .hm-cal .rw-now{height:18px;font-size:9px;letter-spacing:.04em}
  .hm-today{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:10px 10px 10px 12px}
  .hm-ti{width:40px;height:40px}
  .hm-tt .mono{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hm-tt b{font-size:15px}
  .hm-tt small{font-size:12px;line-height:1.35}
  .hm-claim{min-width:96px;padding:0 18px}
  .ofb .ch-x b{font-size:30px}
  /* jackpots: Mega (Plasma) first, then Liquid and Gas side by side */
  .ofb .jp-states{gap:8px}
  .ofb .jp-states .jp{min-height:176px;padding:14px 14px 16px;gap:6px;border-radius:22px}
  .ofb .jp-states .jp-mega{min-height:220px;padding:20px}
  .ofb .jp-states .jp-mega .jp-v{font-size:32px}
  .ofb .jp-states .jp:not(.jp-mega) .jp-v{font-size:18px}
  .ofb .jp-states .jp-h b{font-size:14px}
  .jp-mini .jp-mat{width:40px;height:40px;right:10px;top:10px}
  .ofb .jp-states .jp:not(.jp-mega) .jp-st{padding-right:36px}
  .jp-major .jp-mat{width:84px;height:68px;right:2px;top:2px;scale:.75}
  .jp-mega .jp-mat{width:96px;height:96px;right:18px;top:18px}
  .jp-mega .jp-mat::before{inset:-12px}
  .jp-pr{grid-template-columns:minmax(0,1fr)}
  .jp-prv{font-size:10px}
  .jp-st{font-size:9px;letter-spacing:.06em}
  /* VIP: the heating line turns vertical, a thermometer */
  .vip-pct-n{font-size:52px}
  .vh{grid-template-columns:minmax(0,1fr);gap:0}
  .vh::before,.vh::after{top:32px;left:31px;width:4px;height:auto}
  .vh::before{right:auto;bottom:32px}
  .vh::after{height:calc(var(--vh) / 4 * (100% - 64px));bottom:auto;background:linear-gradient(180deg,var(--ember),var(--flare))}
  .vh-s{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k st" "n st" "s st";justify-items:start;align-items:center;gap:2px 12px;min-height:64px;padding:10px 12px 10px 76px;text-align:left;border-radius:18px}
  .vh-o{left:34px;top:50%;translate:-50% -50%}
  .vh-k{grid-area:k}
  .vh-s h3{grid-area:n;font-size:17px}
  .vh-sum{grid-area:s;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
  .vh-sum b{font-size:13px}
  .vh-st{grid-area:st;justify-self:end;margin:0;padding:0 8px;height:24px;font-size:10px}
  .vh-x{display:none}
  .vh-s.is-now{background:radial-gradient(60% 120% at 10% 50%,rgba(255,153,0,.14),transparent 70%)}
  .ofb .vp-cb2{flex-direction:column;align-items:stretch;gap:16px;padding:20px 20px 20px;min-height:0}
  .ofb .vp-cb2 .bn-t{flex:none;max-width:78%}
  .ofb .vp-cb2 .bn-p{display:none}
  .cb-bars{height:110px;gap:6px;justify-content:space-between}
  .cb-bars li{width:auto;flex:1}
  .ofb .vp-cb2 .go{right:16px;bottom:auto;top:16px;width:44px;height:44px}
  .ofb .vp-cb2.bn.card>img{width:70%;opacity:.55}
  /* welcome stages */
  .ofb .bn.wh{min-height:0;gap:14px;padding:20px}
  .ofb .wh>img{opacity:.55}
  .ofb .wh .bn-h{font-size:17px;max-width:20ch}
  .wh-s{gap:6px;width:100%}
  .wh-s li{min-height:78px;padding:10px 10px 10px}
  .wh-s li:nth-child(2){min-height:90px}
  .wh-s li.pk{min-height:104px}
  .wh-s b{font-size:20px}
  .wh-s small{font-size:10px;line-height:1.25}
  .wh-k{font-size:9px;letter-spacing:.04em}
  .wh-f{width:100%;justify-content:space-between;flex-wrap:nowrap}
  .wh-t{font-size:10px}
  .ofb .wh .bn-cta{flex:none;height:44px;padding:0 22px}
  /* promo detail: sticky action above the bottom nav */
  .po-bar{position:fixed;left:12px;right:12px;bottom:calc(var(--bnav-h) + 10px);z-index:30;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border-radius:var(--r-pill);background:rgba(21,19,19,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line-2),0 14px 34px rgba(0,0,0,.55);translate:0 calc(100% + 40px);opacity:0;visibility:hidden;transition:translate .35s var(--ease),opacity .25s,visibility 0s linear .35s}
  .po-bar.on{translate:0 0;opacity:1;visibility:visible;transition:translate .35s var(--ease),opacity .25s}
  .po-bar-v{flex:1;display:grid;min-width:0}
  .po-bar-v b{font-family:var(--display);font-weight:700;font-size:18px;line-height:1;text-transform:uppercase;color:var(--core);text-shadow:0 0 14px rgba(255,197,107,.45)}
  .po-bar-v small{font-size:12px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .po-bar .btn{height:44px;padding:0 22px}
  .ofb .btn.pone-go{display:none}
  main.ofb:has(.po-bar){padding-bottom:72px}
}
@media (max-width:380px){
  .ofb .hm-cal .rw-v{font-size:10px}
  .ofb .hm-cal .rw-n{font-size:18px}
  .wh-s b{font-size:18px}
  .tz-seg em{font-size:8px}
  .vh-s{padding-left:70px}
}
/* ---------- /40 OWN FACE B ---------- */

/* ---------- 39. OWN FACE A (29.09.2026): game.html, casino.html, category.html, providers.html, search dialog, mobile Menu sheet.
   Art direction A. Owner files: catalog.js, app.js. The lobby (index.html) is untouched: new tile parts only exist in markup
   made by Plazmo.gcard (class .gk), so the lobby's static .gcard/.badge/.players keep their look. COMPONENTS.md "Own face A".
   Vocabulary: heat meter (.hmt), corner tab (.gt), load gauge (.mg), state switch (.stsw), readings (.gr), Heat feed (.hf),
   outlined count (.hd-num), podium (.pvp-grid.ranked). Motion is off under ?still and reduced motion (section 22). ---------- */

/* --- heat meter: a game's temperature, four rising bars Ember → Flare → Flare-hi → Core (replaces the green "playing" dot) --- */
.hmt{display:inline-flex;align-items:flex-end;gap:2px;height:10px;flex:none}
.hmt i{display:block;width:3px;border-radius:1px;background:var(--char-3)}
.hmt i:nth-child(1){height:4px}.hmt i:nth-child(2){height:6px}.hmt i:nth-child(3){height:8px}.hmt i:nth-child(4){height:10px}
.hmt[data-h] i:nth-child(1){background:var(--ember)}
.hmt:is([data-h="2"],[data-h="3"],[data-h="4"]) i:nth-child(2){background:var(--flare)}
.hmt:is([data-h="3"],[data-h="4"]) i:nth-child(3){background:var(--flare-hi)}
.hmt[data-h="4"] i:nth-child(4){background:var(--core);box-shadow:0 0 6px rgba(255,197,107,.9);animation:hmflick 2.4s ease-in-out infinite}
@keyframes hmflick{0%,100%{opacity:1}50%{opacity:.55}}
.gk .players,.sr-hr .players,.gr-nx .players{gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.01em}

/* --- corner tab: a mono label cut into the cover's corner (replaces the floating HOT / NEW pill and the LIVE pill) --- */
.gc .gt{position:absolute;top:0;left:0;z-index:1;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 9px;border-radius:0 0 10px 0;background:rgba(12,12,12,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset -1px -1px 0 var(--line-2);font-family:var(--mono);font-size:10px;font-weight:500;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.gt::before{content:"";flex:none;width:6px;height:6px}
.gt-hot{color:var(--flare-hi)!important}
.gt-hot::before{border-radius:50%;background:var(--orb);box-shadow:0 0 8px rgba(255,153,0,.85)}
.gt-new::before{width:5px;height:5px;border-radius:1px;box-shadow:inset 0 0 0 1.5px var(--bone)}
.gt-live::before{border-radius:50%;background:var(--ok);animation:onair 1.6s ease-out infinite}
/* tile hover: Flare edge + heat rising from the bottom; press sinks the cover */
.gk:hover .gc,.gk:focus-visible .gc{box-shadow:inset 0 0 0 1.5px var(--flare),inset 0 -90px 70px -50px rgba(255,153,0,.26)}
.gk:active .gc{transform:translateY(-1px) scale(.985);transition-duration:.08s}
@media (max-width:767px){
  .gk .gc .gt{height:18px;padding:0 7px 0 6px;gap:4px;font-size:8px;border-radius:0 0 8px 0}
  .gk .gt::before{width:5px;height:5px}
  .gk .players{font-size:10px;gap:5px}
  .gk .hmt{height:8px}.gk .hmt i:nth-child(1){height:3px}.gk .hmt i:nth-child(2){height:5px}.gk .hmt i:nth-child(3){height:6px}.gk .hmt i:nth-child(4){height:8px}
}

/* --- category / catalog header (.bn.head.hd): the object in a soft lens over the outlined count, heat pooling bottom-right.
   Was: the brand gradient slab with the object bleeding off the right edge (Stake). --- */
.hd-num{font-family:var(--display);font-weight:700;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(243,240,235,.2);pointer-events:none;user-select:none;white-space:nowrap}
.hd-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.hd-k::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--heat-bar)}
.hd-meta{gap:6px 0}
.hd-m{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);text-decoration:none;white-space:nowrap}
.hd-m+.hd-m::before{content:"";width:1px;height:12px;margin:0 4px 0 12px;background:var(--line-3)}
a.hd-m:hover{color:var(--bone);text-decoration:underline;text-underline-offset:4px}
a.hd-m:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:2px}
.cp .bn.head.hd{min-height:216px;padding:32px 40px;background:radial-gradient(70% 150% at 100% 100%,rgba(142,21,4,.6),transparent 62%),radial-gradient(34% 70% at 84% 42%,rgba(255,153,0,.12),transparent 70%),var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.cp .bn.head.hd::before{display:none}
.cp .bn.head.hd>img{inset:auto;top:50%;right:clamp(24px,7%,110px);width:auto;height:128%;aspect-ratio:1;translate:0 -50%;object-fit:cover;object-position:50% 50%;mix-blend-mode:lighten;opacity:.95;-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);animation:hdfloat 9s ease-in-out infinite alternate;z-index:-1}
.cp .bn.head.hd .hd-num{position:absolute;z-index:-2;right:calc(clamp(24px,7%,110px) + 170px);bottom:-.13em;font-size:clamp(150px,15vw,236px)}
.cp .bn.head.hd .bn-t{gap:10px;max-width:min(56%,600px)}
.cp .bn.head.hd .bn-p{max-width:52ch}
@keyframes hdfloat{from{translate:0 -50%}to{translate:0 calc(-50% - 8px)}}

/* --- category bar: a mono count on every tab; the current one heats from the bottom with a heat-scale line (was: Flare stub underline, Pinco) --- */
.cp .cb-i{min-width:96px}
.cb-n{position:absolute;top:9px;right:12px;font-family:var(--mono);font-size:10px;line-height:1;color:var(--ash);opacity:.75;font-variant-numeric:tabular-nums}
.cp .cb-i[aria-current]{background:var(--char);box-shadow:inset 0 -26px 28px -22px rgba(255,153,0,.34)}
.cp .cb-i[aria-current]::after{left:14px;right:14px;height:2px;background:var(--heat-bar)}
.cp .cb-i[aria-current] .cb-n{color:var(--flare-hi);opacity:1}
.cp .cb-i:active{background:var(--char-2)}

/* --- quick filters: square mono keys with a heat dot (was: rounded text pills). Pressed = the dot turns into plasma --- */
.cp .cf-chips .pick,.sr-cats .pick{height:36px;padding:0 14px 0 12px;gap:8px;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2)}
.cp .cf-chips .pick:not(:has(svg))::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--char-3);box-shadow:inset 0 0 0 1px var(--line-3);transition:background .2s,box-shadow .2s}
.cp .cf-chips .pick:hover,.sr-cats .pick:hover{color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-3)}
.cp .cf-chips .pick[aria-pressed="true"],.sr-cats .pick[aria-pressed="true"]{background:var(--char-2);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(255,153,0,.6)}
.cp .cf-chips .pick[aria-pressed="true"]::before{background:var(--orb);box-shadow:0 0 8px rgba(255,153,0,.8)}
.cp .cf-chips .pick[aria-pressed="true"] svg,.sr-cats .pick[aria-pressed="true"] svg{color:var(--flare)}
.cp .cf-chips .pick:active,.sr-cats .pick:active{background:var(--char-3)}
.cp .cf-sel .cf-x{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-radius:10px}
@media (max-width:767px){.cp .cf-chips .pick{height:44px}}

/* --- load gauge: the bar heats up Char → Ember → Flare → Core as the grid fills (was: Load more on a divider line, Stake) --- */
.cp .more.mg{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;align-items:center;gap:16px 24px;margin-top:8px;padding:14px 14px 14px 22px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.mg-g{display:flex;align-items:center;gap:16px;min-width:0}
.mg-n{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--mono);font-size:13px;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-n b{font-size:18px;font-weight:500;color:var(--bone);transition:color .4s,text-shadow .4s}
.mg-bar{position:relative;flex:1;height:6px;border-radius:var(--r-pill);background:var(--char-3);overflow:hidden}
.mg-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--char-3),var(--ember) 34%,var(--flare) 74%,var(--core));clip-path:inset(0 calc(100% - var(--v,0%)) 0 0 round 99px);transition:clip-path .7s var(--ease)}
.cp .mg .mg-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp .mg .more-l{width:auto}
.cp .mg .more-l::before,.cp .mg .more-l::after{display:none}
.cp .mg .more-b{height:44px;padding:0 22px;background:var(--char-2);box-shadow:none}
.cp .mg .more-b:hover{background:var(--char-3)}
.cp .mg .more-b:active{transform:scale(.98)}
.mg.full{grid-template-columns:minmax(0,1fr)}
.mg.full .mg-n b{color:var(--core);text-shadow:0 0 12px rgba(255,197,107,.7)}
@media (max-width:767px){
  .cp .more.mg{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
  .cp .mg .more-b{width:100%;justify-content:center}
}

/* --- empty states on my pages: a quiet panel with an ember halo --- */
.cp .empty:not(.sr-empty),.hf .hf-empty{border-radius:var(--r-l);background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.cp .empty .e-ic,.hf .hf-empty .e-ic,.sr-empty .e-ic{box-shadow:inset 0 0 0 1px var(--line),0 0 0 8px rgba(142,21,4,.18),0 0 28px 4px rgba(142,21,4,.25);color:var(--bone-2)}
.hf .hf-empty{margin:16px;padding:32px 20px}

/* --- Heat feed (was Live bets with My bets / All bets / High rollers / Race, Stake): each round is a reading on the heat scale --- */
.hf-live{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-size:11px!important;letter-spacing:.06em!important;text-transform:uppercase;white-space:nowrap}
.hf-live i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--flare);animation:hfp 1.8s ease-out infinite}
@keyframes hfp{0%{box-shadow:0 0 0 0 rgba(255,153,0,.55)}100%{box-shadow:0 0 0 6px rgba(255,153,0,0)}}
.hf-tabs{gap:6px;border-bottom:0}
.hf-tabs>button{height:36px;padding:0 14px;border-radius:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line)}
.hf-tabs>button:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.hf-tabs>[aria-selected="true"]{background:var(--char);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -2px 0 var(--flare)}
.hf-tabs>[aria-selected="true"]::after{display:none}
.hf .hf-r{--hc:var(--line-2)}
.hf .hf-r[data-t="ember"]{--hc:var(--ember)}
.hf .hf-r[data-t="flare"]{--hc:var(--flare)}
.hf .hf-r:is([data-t="core"],[data-t="peak"]){--hc:var(--core)}
.hf .hf-r td:first-child{box-shadow:inset 3px 0 0 var(--hc)}
.hf .hf-r[data-t="ember"] .hf-m{color:var(--bone)}
.hf .hf-r[data-t="flare"] .hf-m{color:var(--flare)}
.hf .hf-r:is([data-t="core"],[data-t="peak"]) .hf-m{color:var(--core);text-shadow:0 0 10px rgba(255,197,107,.7)}
.hf .hf-r[data-t="peak"]{background:radial-gradient(60% 200% at 100% 50%,rgba(255,241,214,.12),rgba(255,153,0,.07) 45%,transparent 80%)}
.hf .hf-r[data-t="cold"] .thumb{opacity:.6}
.hf .hf-r.in{animation:hfin .7s var(--ease)}
@keyframes hfin{from{opacity:0;background:rgba(255,153,0,.14)}to{opacity:1}}
@media (max-width:767px){
  .hf-live{font-size:0!important;gap:0;margin-left:4px}
  .hf-tabs{margin-inline:-16px;padding-inline:16px}
  .hf-tabs>button{flex:none;height:40px}
  .hf .tbl.cards .hf-r{box-shadow:inset 3px 0 0 var(--hc)}
  .hf .hf-r td:first-child{box-shadow:none}
}

/* --- game page: title with mono readouts (was: pill tags) --- */
.gp .gp-t{display:grid;gap:10px;min-width:0}
.gp .gp-ph h1{font-size:var(--h1)}
.gp-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
.gp-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);white-space:nowrap}
.gp-k+.gp-k::before{content:"";width:1px;height:12px;margin:0 4px 0 12px;background:var(--line-3)}
.gp-k .link{color:var(--bone)}

/* --- game page: the chamber. Breathing heat under the cover, corner ticks, a state readout; solid (demo) is cold and grey --- */
.gp .gv-main{box-shadow:inset 0 0 0 1px var(--line)}
.gp .gv-frame{background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,240,235,.022) 11px 12px),var(--soot-2)}
.gp .gv-frame::before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(34% 46% at 50% 52%,rgba(255,197,107,.16),rgba(255,153,0,.12) 30%,rgba(142,21,4,.36) 55%,transparent 78%);transition:filter .6s,opacity .6s;animation:gvbreath 6s ease-in-out infinite alternate}
.gp .gv-frame[data-st="demo"]::before{filter:grayscale(1);opacity:.55}
@keyframes gvbreath{from{opacity:.72;scale:.95}to{opacity:1;scale:1.04}}
.gp .gv-frame::after{content:"";position:absolute;inset:16px;z-index:0;pointer-events:none;transition:opacity .3s;background:
  linear-gradient(var(--line-3),var(--line-3)) 0 0/16px 1px no-repeat,linear-gradient(var(--line-3),var(--line-3)) 0 0/1px 16px no-repeat,
  linear-gradient(var(--line-3),var(--line-3)) 100% 0/16px 1px no-repeat,linear-gradient(var(--line-3),var(--line-3)) 100% 0/1px 16px no-repeat,
  linear-gradient(var(--line-3),var(--line-3)) 0 100%/16px 1px no-repeat,linear-gradient(var(--line-3),var(--line-3)) 0 100%/1px 16px no-repeat,
  linear-gradient(var(--line-3),var(--line-3)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--line-3),var(--line-3)) 100% 100%/1px 16px no-repeat}
.gp .gv-frame.on::after{opacity:0}
.gv-rd{position:absolute;top:26px;left:30px;z-index:1;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.gv-rd::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--char-3);box-shadow:inset 0 0 0 1px var(--line-3);transition:border-radius .4s var(--ease),background .4s,box-shadow .4s}
.gv-frame[data-st="real"] .gv-rd::before{border-radius:50%;background:var(--orb);box-shadow:0 0 10px rgba(255,153,0,.8)}
.gv-frame.on .gv-rd{display:none}
.gp .gv-stage{position:relative;z-index:1}
.gp .gv-stage .gc{box-shadow:inset 0 0 0 1px rgba(243,240,235,.14),0 30px 70px -26px rgba(0,0,0,.9)}
.gp .gv-frame[data-st="real"] .gv-stage .gc{box-shadow:inset 0 0 0 1px rgba(255,241,214,.22),0 26px 70px -24px rgba(255,153,0,.45)}
.gp .gv-note{letter-spacing:.04em}
/* stage buttons as one joined pair, the same shape as the state switch */
.gp .gv-go{gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(12,12,12,.6);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gp .gv-go .btn.ghost{box-shadow:none}
.gp .gv-go .btn.ghost:hover{background:var(--char-2)}
.gp .gv-go .btn:active{transform:scale(.97)}
/* heat sweep across the frame when the state turns to plasma (real money) */
.gv-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 32%,rgba(142,21,4,.5) 42%,rgba(255,153,0,.5) 49%,rgba(255,241,214,.65) 53%,transparent 62%) 100% 0/320% 100% no-repeat}
.gv-frame.sweep .gv-sweep{animation:gvsweep .9s var(--ease) forwards}
@keyframes gvsweep{0%{opacity:1;background-position:100% 0}80%{opacity:1}100%{opacity:0;background-position:0 0}}

/* --- game page: state bar under the frame. The Demo ⇄ Real switch = solid → plasma: the knob morphs from a flat square
   into a glowing heat pill (was: "Play for fun / Real money" segmented control + Provably fair badge, Stake) --- */
.gp .gv-bar{flex-wrap:nowrap;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px}
.gp .gv-mode{min-width:0}
.gp .gv-tools{margin-left:auto;gap:6px}
.gp .gv-tools .icon-btn{width:40px;height:40px;border-radius:12px;background:transparent;color:var(--ash);box-shadow:inset 0 0 0 1px var(--line)}
.gp .gv-tools .icon-btn:hover{background:var(--char-2);color:var(--bone)}
.gp .gv-tools .icon-btn:active{background:var(--char-3)}
.gp .gv-tools .icon-btn[aria-pressed="true"]{color:var(--flare);box-shadow:inset 0 0 0 1px rgba(255,153,0,.5)}
.gv-hint{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gv-frame.on+.gv-bar .gv-hint{display:none}
.gv-frame:not(.on)+.gv-bar .stsw{display:none}
.stsw{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:300px;max-width:100%;padding:4px;border-radius:var(--r-pill);background:var(--soot-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.stsw>button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;height:40px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ash);white-space:nowrap;transition:color .35s}
.stsw>button small{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.stsw>button:hover{color:var(--bone)}
.stsw>button[aria-pressed="true"]{color:var(--bone)}
.stsw>button:focus-visible{outline:2px solid var(--flare);outline-offset:1px}
.stsw-k{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--char-3);box-shadow:inset 0 0 0 1px var(--line-2);transition:translate .5s var(--ease),border-radius .5s var(--ease),box-shadow .5s}
.stsw-k::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(90% 160% at 72% 50%,rgba(255,241,214,.4),transparent 55%),var(--heat);opacity:0;transition:opacity .5s}
.stsw[data-st="real"] .stsw-k{translate:100% 0;border-radius:var(--r-pill);box-shadow:0 0 20px -2px rgba(255,153,0,.55),inset 0 0 0 1px rgba(255,241,214,.3)}
.stsw[data-st="real"] .stsw-k::before{opacity:1}

/* --- game page: Readings column (was: "Recommended games" with "published N ago · N playing", Stake).
   Max win as the lobby's outlined numeral, RTP on a scale with the market-average tick, volatility as a thermometer, Up next queue --- */
.gp .gv-read{gap:16px;padding:18px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.gr-h{display:flex;align-items:center;gap:8px;min-height:32px;padding-left:4px}
.gr-h h2{font-size:17px;letter-spacing:0}
.gr-h .sp{flex:1}
.gp .gv-read .x{background:var(--char-2)}
.gr-l{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:var(--r-m);overflow:hidden;background:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.gr{display:grid;gap:8px;align-content:start;padding:14px 14px 16px;background:var(--soot-2);min-width:0}
.gr dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.gr dd{margin:0;display:grid;gap:8px;min-width:0}
.gr b{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.gr small{font-size:11px;line-height:1.35;color:var(--ash)}
.gr-max{grid-column:1/-1;order:-1;position:relative;overflow:hidden;background:radial-gradient(80% 140% at 100% 100%,rgba(142,21,4,.35),transparent 70%),var(--soot-2)}
.gr-max dd{grid-auto-flow:column;justify-content:start;align-items:end;gap:12px}
.gr .gr-big{font-family:var(--display);font-weight:700;font-size:38px;line-height:.9;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.3px var(--core);filter:drop-shadow(0 0 10px rgba(255,197,107,.35))}
.gr-bet{grid-column:1/-1}
.gr-bet dd{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}
.gr-scale{position:relative;height:4px;border-radius:2px;background:var(--char-3)}
.gr-scale i{position:absolute;inset:0 auto 0 0;width:var(--v,50%);border-radius:inherit;background:var(--heat-bar);transition:width .8s var(--ease)}
.gr-scale em{position:absolute;left:60%;top:-3px;bottom:-3px;width:1px;background:var(--bone-2)}
.thermo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;height:6px}
.thermo i{border-radius:2px;background:var(--char-3)}
.thermo[data-v] i:nth-child(1){background:var(--ember)}
.thermo:is([data-v="2"],[data-v="3"],[data-v="4"]) i:nth-child(2){background:var(--flare)}
.thermo:is([data-v="3"],[data-v="4"]) i:nth-child(3){background:var(--flare-hi)}
.thermo[data-v="4"] i:nth-child(4){background:var(--core);box-shadow:0 0 8px rgba(255,197,107,.8)}
.gr-fair{display:flex;align-items:center;gap:8px;margin:0;padding-left:4px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash)}
.gr-fair svg{color:var(--ok);flex:none}
.gr-next{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.gr-nh{padding-left:4px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
ol.rec-l{list-style:none;margin:0;padding:0}
.gp .gr-nx{grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px;padding:6px 10px 6px 4px}
.gr-nx .rk{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.04em;text-align:right;color:transparent;-webkit-text-stroke:1px rgba(243,240,235,.34);transition:-webkit-text-stroke-color .2s}
.gr-nx:hover .rk,.gr-nx:focus-visible .rk{-webkit-text-stroke-color:var(--flare)}
.gr-nx .gc.sq{width:44px}
.gr-nx .rec-t b{font-size:13px}
.gr-nx:active{background:var(--char-3)}

/* --- game page: the studio rail header (was: provider card with Follow, Stake). Logo mono → colour like every provider logo --- */
.gv-studio .ttl{gap:12px}
.gv-studio .gv-logo{height:36px;min-width:0;padding:0 10px;border-radius:10px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.gv-studio .gv-logo>.pv-logo{width:84px}
.gv-studio .gv-logo>span:not(.pv-logo){font-size:11px}
@media (hover:hover){
  .gv-studio .ttl:hover .pv-logo .c{opacity:1;transition-duration:.15s}
  .gv-studio .ttl:hover .pv-logo .m{opacity:0;transition-duration:.15s}
}
.gv-studio .ttl:is(:active,:focus-visible) .pv-logo .c{opacity:1;transition-duration:.15s}
.gv-studio .ttl:is(:active,:focus-visible) .pv-logo .m{opacity:0;transition-duration:.15s}
.gv-bell{width:32px;height:32px;background:var(--char);color:var(--ash)}
.gv-bell:hover{color:var(--bone);background:var(--char-2)}
.gv-bell[aria-pressed="true"]{color:var(--flare);box-shadow:inset 0 0 0 1px rgba(255,153,0,.5)}

/* --- game page: phones. Readings right under the frame, Play dock above the bottom nav --- */
@media (max-width:1180px){
  .gp .gv-read{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;column-gap:20px}
  .gp .gv-read .gr-h,.gp .gv-read .gr-fair{grid-column:1}
  .gp .gv-read .gr-l{grid-column:1}
  .gp .gv-read .gr-next{grid-column:2;grid-row:1/span 3;padding-top:0;border-top:0}
  .gp .gv-read .rec-l{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .gp .gv{display:flex;flex-direction:column;align-items:stretch;gap:12px} /* .gv sets align-items:start for the desktop grid; in the column it shrank the play frame */
  .gp .gv-col{display:contents}
  .gp .gv-main{order:0}
  .gp .gv-read{order:1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;border-radius:22px}
  .gp .gv-read .gr-next{display:none}
  .gp .gv-col>:not(.gv-main){order:2}
  .gr-h{min-height:24px}
  .gr-h h2{font-size:15px}
  .gr{padding:12px}
  .gr b{font-size:16px}
  .gr .gr-big{font-size:30px}
  .gv-rd{top:18px;left:20px;font-size:9px}
  .gp .gv-frame::after{inset:10px}
  .gp .gv-bar{padding:10px 10px 10px 14px}
  .gp .gv-frame.on+.gv-bar{flex-wrap:wrap}
  .gp .gv-frame.on+.gv-bar .gv-mode{width:100%;flex:1 1 100%}
  .stsw{width:100%}
  .stsw>button{height:44px}
  .gp .gv-tools .icon-btn{width:44px;height:44px}
  .gv-hint{display:none}
  .gp .gv-frame:not(.on)+.gv-bar .gv-tools{margin-left:0;width:100%;justify-content:flex-start}
  .gp-k+.gp-k::before{margin:0 2px 0 8px}
  .gp .gv-stage{padding-top:48px}
  .gv-studio .ct{display:none}
  .gv-studio .gv-logo{height:32px;padding:0 6px}
  .gv-studio .gv-logo>.pv-logo{width:68px}
}
.gv-dock{position:fixed;left:12px;right:12px;bottom:calc(var(--bnav-h) + 10px);z-index:39;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:var(--r-pill);background:rgba(21,19,19,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line-2),0 14px 36px -10px rgba(0,0,0,.8);animation:dockin .35s var(--ease)}
.gv-dock-t{flex:1;min-width:0;display:grid}
.gv-dock-t b{font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-dock-t small{font-size:11px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-dock .btn{flex:none;height:44px;padding:0 20px}
@keyframes dockin{from{opacity:0;translate:0 12px}}
@media (min-width:768px){.gv-dock{display:none!important}}

/* --- providers page: outlined studio count, a podium for the three biggest studios, share of the catalog as a heat bar
   (was: a generic grid of logo tiles). Logos keep the mono → colour crossfade (section 38, .pv) --- */
.pvp-hd{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:200px;padding:30px 36px;border-radius:var(--r-l);background:radial-gradient(70% 150% at 100% 100%,rgba(142,21,4,.55),transparent 62%),var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.pvp-ph .pvp-t{display:grid;justify-content:start;justify-items:start;gap:10px;max-width:620px}
.pvp-ph .lead{max-width:56ch;font-size:15px;color:var(--bone-2)}
.pvp-num{position:absolute;z-index:-1;right:28px;bottom:-.13em;font-size:clamp(150px,15vw,230px)}
.pvp-grid .pvt{isolation:isolate;overflow:hidden;height:140px;padding:0 16px 10px;gap:8px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line);transition:color .2s,box-shadow .2s,background-color .2s,translate .25s var(--ease)}
.pvp-grid .pvt::before{content:"";position:absolute;inset:auto 0 0 0;height:80%;z-index:-1;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,rgba(255,153,0,.22),rgba(142,21,4,.2) 45%,transparent 75%);opacity:0;transition:opacity .25s}
.pvp-grid .pvt:is(:hover,:focus-visible)::before{opacity:1}
.pvp-grid .pvt:hover{translate:0 -2px;box-shadow:inset 0 0 0 1px rgba(255,153,0,.6)}
.pvp-grid .pvt:active{translate:0 0;background:var(--char-2)}
.pvt small{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px}
.pvt-pl{display:inline-flex;align-items:center;gap:6px;color:var(--ash)}
.pvt-bar{position:absolute;left:14px;right:14px;bottom:12px;height:3px;border-radius:2px;background:var(--char-3);overflow:hidden}
.pvt-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ember),var(--flare) 60%,var(--core));clip-path:inset(0 calc(100% - var(--s,10%)) 0 0)}
.pvp-grid.ranked .pvt[data-rk]{padding-top:26px}
.pvp-grid.ranked .pvt[data-rk]::after{content:attr(data-rk);position:absolute;left:14px;top:12px;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(243,240,235,.32);pointer-events:none}
.pvp-grid.ranked .pvt[data-rk="1"]::after{-webkit-text-stroke-color:rgba(255,241,214,.8);filter:drop-shadow(0 0 8px rgba(255,197,107,.4))}
.pvp-grid.ranked .pvt[data-rk="1"] .pvt-bar i{box-shadow:0 0 8px rgba(255,197,107,.8)}
@media (min-width:768px){
  .pvp-grid.ranked .pvt[data-rk]{grid-column:span 2;height:176px}
  .pvp-grid.ranked .pvt[data-rk] .pv-logo{max-width:200px}
  .pvp-grid.ranked .pvt[data-rk]::after{top:14px;left:18px;font-size:44px}
}
@media (max-width:767px){
  .pvp-hd{min-height:0;padding:18px 16px;border-radius:22px}
  .pvp-num{font-size:110px;right:12px}
  .pvp-grid .pvt{height:118px;padding:0 8px 10px}
  .pvt-pl{display:none}
  .pvp-grid.ranked .pvt[data-rk="1"]{grid-column:1/-1;height:132px}
  .pvp-grid.ranked .pvt[data-rk]{height:132px}
  .pvp-grid.ranked .pvt[data-rk]::after{font-size:22px;top:10px;left:12px}
  .pvp-grid.ranked .pvt[data-rk="1"]::after{font-size:30px}
}

/* --- search dialog: Hottest right now as a ranked list with outlined numerals, providers as logo tiles, mono category keys --- */
.sr-live{margin-left:auto;font-size:10px!important;letter-spacing:.08em;text-transform:uppercase}
.sr-hot{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.sr-hr{display:grid;grid-template-columns:34px 48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 4px;border-radius:var(--r-m);color:inherit;text-decoration:none;outline:none;transition:background-color .15s}
.sr-hr:hover{background:var(--char)}
.sr-hr:focus-visible{background:var(--char);box-shadow:inset 0 0 0 1.5px var(--flare)}
.sr-hr:active{background:var(--char-2)}
.sr-n{font-family:var(--display);font-weight:700;font-size:34px;line-height:.8;letter-spacing:-.05em;text-align:right;color:transparent;-webkit-text-stroke:1.2px rgba(243,240,235,.3);transition:-webkit-text-stroke-color .2s}
.sr-hot li:first-child .sr-n{-webkit-text-stroke-color:rgba(255,241,214,.8)}
.sr-hr:is(:hover,:focus-visible) .sr-n{-webkit-text-stroke-color:var(--flare)}
.sr-hr .gc.sq{width:48px}
.sr-hr-t{display:grid;gap:1px;min-width:0}
.sr-hr-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-hr-t small{font-size:12px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-pvs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.sr-pv{border:0;font:inherit;cursor:pointer;width:100%;aspect-ratio:2/1;padding:0 12px}
.sr-pv .wm-b{font-size:12px;white-space:normal}
.sr-cats .pick{flex:none}
@media (max-width:767px){
  .sr-hot{grid-template-columns:minmax(0,1fr)}
  .sr-hr{grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px;padding:6px 8px 6px 2px}
  .sr-hr .gc.sq{width:44px}
  .sr-n{font-size:30px}
  .sr-pvs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sr-pv{padding:0 8px}
  .sr-cats .pick{height:40px}
}

/* --- mobile Menu sheet: the VIP line gets a heat bar, game-type tiles read like specimen labels --- */
.mn-heat{position:relative;display:block;width:132px;height:3px;margin-top:6px;border-radius:2px;background:var(--char-3);overflow:hidden}
.mn-heat i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ember),var(--flare) 70%,var(--core));clip-path:inset(0 calc(100% - var(--v,0%)) 0 0)}
.mn-tiles a{position:relative;overflow:hidden;isolation:isolate;justify-items:start;align-content:space-between;gap:10px;min-height:76px;padding:14px;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2);box-shadow:inset 0 0 0 1px var(--line)}
.mn-tiles a svg{color:var(--bone);opacity:.8}
.mn-tiles a::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;z-index:-1;background:radial-gradient(70% 100% at 0% 100%,rgba(255,153,0,.2),rgba(142,21,4,.18) 45%,transparent 75%);opacity:0;transition:opacity .2s}
.mn-tiles a:is(:hover,:active,[aria-current])::after{opacity:1}
.mn-tiles a[aria-current]{color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -2px 0 var(--flare)}
.mn-tiles a[aria-current] svg{color:var(--flare);opacity:1}

@media (max-width:380px){.gp-k{font-size:10px;letter-spacing:.04em;gap:6px}.gp-k+.gp-k::before{margin:0 2px 0 6px}}

/* --- category / catalog header on phones: compact, no object; the outlined count stays as the signature --- */
@media (max-width:767px){
  .cp .bn.head.hd{min-height:0;padding:16px 16px 14px;gap:0;justify-content:flex-start;border-radius:22px;background:radial-gradient(90% 170% at 100% 100%,rgba(142,21,4,.55),transparent 64%),var(--char)}
  .cp .bn.head.hd .bn-t{max-width:100%;gap:8px}
  .cp .bn.head.hd .hd-num{right:10px;bottom:-.12em;font-size:100px}
  .cp .bn.head.hd .hd-m:nth-child(2){display:none}
  .cp .bn.head.hd .hd-k{font-size:10px}
  .cp .cb-i{min-width:80px}
  .cb-n{top:7px;right:8px;font-size:9px}
}

/* ---------- 41. OWN FACE C (29.09.2026): profile, history, transactions, help-*, legal-*, about (+ assets/js/docs.js) ----------
   Scoped to these pages only (body[data-page] … main), the lobby and the pages of agents A and B are untouched.
   One language for calm pages, taken from the lobby: mono micro-labels, outlined Loos numerals, "temperature" instead of colour chips.
   .prog.heat        progress as heat (Ember → Flare → Core), .seg = four cells (verification)
   .st               status = small temperature dot + mono label (no filled pill)
   numbered tabs     01 General · 02 Favourites … (account, help, legal sub-nav), heat underline
   .ax-vf            verification = a heat strip of four cells over the current step, outlined step numerals (.of-num)
   .ax-t             ledger: IN / OUT marks, dashed receipt rules; on phones every row is a receipt slip
   .of-els           help topics as element cells of a periodic table (number, kind, symbol)
   .lg-n             legal section numbers as outlined numerals (docs.js wraps them), mono numbers in the TOC
   .of-ladder        VIP limits as a heat ladder, "Your level" marked
   .ab-mat           about: ordinary objects, unusual materials (spec plates) */

/* H1 of the guest "log in" screen follows the page H1 rule on these pages */
:is([data-page="profile"],[data-page="history"],[data-page="transactions"]) main .gst-acc h1{font-size:var(--h1)}

/* --- heat meter --- */
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .prog.heat{height:6px;background:var(--char-3)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .prog.heat>i{width:100%;background:linear-gradient(90deg,var(--ember),var(--flare) 62%,var(--core));clip-path:inset(0 calc(100% - var(--v,0%)) 0 0 round 99px);transition:clip-path .8s var(--ease)}
main .prog.heat.seg{border-radius:0;-webkit-mask:linear-gradient(90deg,#000 calc(25% - 2px),transparent 0 calc(25% + 2px),#000 0 calc(50% - 2px),transparent 0 calc(50% + 2px),#000 0 calc(75% - 2px),transparent 0 calc(75% + 2px),#000 0);mask:linear-gradient(90deg,#000 calc(25% - 2px),transparent 0 calc(25% + 2px),#000 0 calc(50% - 2px),transparent 0 calc(50% + 2px),#000 0 calc(75% - 2px),transparent 0 calc(75% + 2px),#000 0)}
main .prog.heat.seg>i{clip-path:inset(0 calc(100% - var(--v,0%)) 0 0)}

/* --- statuses: temperature dots --- */
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st{height:auto;min-height:18px;padding:0;gap:8px;background:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st::before{width:7px;height:7px;flex:none;background:var(--ash);box-shadow:0 0 0 3px rgba(243,240,235,.07)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st.ok::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg),0 0 8px rgba(61,220,132,.55)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st.pend::before{background:var(--pend);box-shadow:0 0 0 3px var(--pend-bg),0 0 8px rgba(122,184,255,.5)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st.fail::before{background:var(--fail);box-shadow:0 0 0 3px var(--fail-bg),0 0 8px rgba(255,92,92,.5)}
:is([data-page="profile"],[data-page="history"],[data-page="transactions"],[data-page^="help-"],[data-page^="legal-"],[data-page="about"]) main .st.fail{color:var(--bone)}
/* the status that is a button (profile identity) keeps a button shape */
main.ax button.st{min-height:32px;padding:0 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--bone)}
main.ax button.st:hover{filter:none;box-shadow:inset 0 0 0 1px var(--line-3);background:var(--char-2)}
main.ax button.st:active{transform:scale(.97)}

/* --- switches: on = Cloud Dancer (Flare stays for the one CTA) --- */
:is([data-page="profile"],[data-page^="help-"],[data-page^="legal-"]) main .switch input:checked{background:var(--bone)}
:is([data-page="profile"],[data-page^="help-"],[data-page^="legal-"]) main .switch input:checked::after{background:var(--soot)}
:is([data-page="profile"],[data-page^="help-"],[data-page^="legal-"]) main .switch input:disabled:checked{background:var(--line-3)}

/* --- numbered tabs (account tabs, help and legal sub-nav): 01 General · 02 Favourites …, heat underline --- */
main.ax .ax-tabs,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs{counter-reset:oft}
main.ax .ax-tabs>*,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs>*{counter-increment:oft;gap:8px}
main.ax .ax-tabs>*::before,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs>*::before{content:counter(oft,decimal-leading-zero);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--ash);opacity:.75;transition:color .15s,opacity .15s}
main.ax .ax-tabs>[aria-selected="true"]::before,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs>[aria-current]::before{color:var(--bone);opacity:1}
main.ax .ax-tabs>button>svg,:is([data-page^="help-"],[data-page^="legal-"]) main .hc-ph .tabs>a>svg{display:none}
main.ax .ax-tabs>[aria-selected="true"]::after,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs>[aria-current]::after{height:2px;background:linear-gradient(90deg,var(--ember),var(--flare) 62%,var(--core))}
main.ax .ax-tabs .ct{height:18px;padding:0 6px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
main.ax .ax-tabs>button:active,:is([data-page^="help-"],[data-page^="legal-"]) main :is(.hc-ph,.lg-ph) .tabs>a:active{opacity:.7}

/* ================= ACCOUNT (main.ax) ================= */
/* identity: a spec plate, not a wallet strip. Heat line on the top edge, Ember ring = the VIP level */
main.ax .ax-id{overflow:hidden;background:radial-gradient(70% 160% at 0% 0%,rgba(142,21,4,.14),transparent 62%),var(--char)}
main.ax .ax-id::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 4%,var(--ember) 30%,var(--flare) 72%,var(--core));opacity:.85;pointer-events:none}
main.ax .ax-who .avatar{font-family:var(--display);font-weight:700;letter-spacing:-.02em;background:var(--soot);box-shadow:0 0 0 2px var(--char),0 0 0 3.5px var(--ember),0 0 26px rgba(142,21,4,.55)}
main.ax .of-lvl{text-decoration:none;gap:7px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--bone);transition:box-shadow .15s,background-color .15s}
main.ax .of-lvl:hover{box-shadow:inset 0 0 0 1px var(--line-3);background:var(--char-2)}
main.ax .of-lvl:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.of-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ember);box-shadow:0 0 0 3px rgba(142,21,4,.32),0 0 10px rgba(255,153,0,.35)}
main.ax .ax-bv .k::after{content:" · EUR";color:var(--line-3)}

/* side cards: mono micro-label rows, calm icon discs */
main.ax .ax-ic{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ash)}
main.ax .ax-card .kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
main.ax .ax-gvf .prog-meta span:last-child{color:var(--bone)}

/* verification: a heat strip of four cells (not a sticky step column), the current step below it */
main.ax .ax-vf{grid-template-columns:minmax(0,1fr)}
main.ax .ax-vf-nav{position:static;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-areas:"h st" "m st" "sf sf";column-gap:48px;row-gap:12px;align-items:start}
main.ax .ax-vf-nav>.panel-h{grid-area:h}
main.ax .ax-vf-nav>.prog-meta{grid-area:m;align-self:end}
main.ax .ax-vf-nav>.prog{display:none}
main.ax .ax-vf-nav>.steps{grid-area:st}
main.ax .ax-vf-nav>.ax-safe{grid-area:sf}
main.ax .ax-vf-nav .prog-meta span:last-child{font-size:13px;color:var(--bone)}
/* shared cell stepper: profile verification + help-kyc "How it works" */
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step{display:grid;grid-template-columns:none;justify-items:start;text-align:left;gap:4px;padding:18px 0 0;align-content:start}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step::before{display:block;top:0;left:0;right:0;bottom:auto;width:auto;height:6px;border-radius:var(--r-pill);background:var(--char-3)}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done::before{background:linear-gradient(90deg,var(--ember),var(--flare) 62%,var(--core)) 0 0/400% 100%}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done:nth-child(2)::before{background-position:33.33% 0}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done:nth-child(3)::before{background-position:66.66% 0}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done:nth-child(4)::before{background-position:100% 0}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.cur::before{background:repeating-linear-gradient(135deg,rgba(142,21,4,.75) 0 5px,var(--char-3) 5px 10px)}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step .dot{display:block;width:auto;height:auto;margin:8px 0 2px;border-radius:0;background:none;box-shadow:none;font-family:var(--display);font-size:30px;font-weight:700;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.1px var(--line-3)}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step .dot::before{content:counter(st,decimal-leading-zero);width:auto;height:auto;background:none}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done .dot{color:var(--bone);-webkit-text-stroke:0}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.cur .dot{-webkit-text-stroke-color:var(--flare)}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step b{font-size:14px}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step small{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em}
:is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step.done small{color:var(--bone-2)}
/* the current step: outlined numeral next to the title */
main.ax .ax-vf-main .panel-h{align-items:flex-start;gap:20px}
.of-num{flex:none;font-family:var(--display);font-size:56px;font-weight:700;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px var(--line-3);user-select:none}
main.ax .opt:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--bone);background:var(--char-2)}
main.ax .opt:has(input:checked)::after{box-shadow:inset 0 0 0 5px var(--bone)}
main.ax .drop:hover,main.ax .drop.over{border-color:var(--line-3);background-color:var(--char-2)}

/* limits: the used amount leads, the meter shows how hot the week is */
main.ax .ax-use .prog-meta b{font-size:15px}
main.ax .ax-lims .panel-h h3{font-size:14px}

/* settings and security panels: mono index in the corner (01 / 04), calm */
main.ax #tp-set,main.ax #tp-sec .ax-2col{counter-reset:ofp}
main.ax #tp-set>.panel,main.ax #tp-sec .ax-2col>.panel{counter-increment:ofp}
main.ax #tp-set>.panel::after,main.ax #tp-sec .ax-2col>.panel::after{content:counter(ofp,decimal-leading-zero);position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--line-3)}

/* summary strip: "In progress" is the one warm cell */
main.ax .ax-sum .stat.of-warm{background:radial-gradient(120% 170% at 0% 100%,rgba(142,21,4,.3),transparent 70%)}
main.ax .ax-sum .stat.of-warm .k{display:inline-flex;align-items:center;gap:8px}
main.ax .ax-sum .stat.of-warm .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pend);box-shadow:0 0 0 3px var(--pend-bg)}

/* ledger (history, transactions, sessions): round discs, IN / OUT marks, receipt rules */
main.ax .tbl.ax-t .thumb{border-radius:50%;background:var(--soot);box-shadow:inset 0 0 0 1px var(--line-2)}
main.ax .tbl.ax-t td{border-bottom-style:dashed}
main.ax .tbl.ax-t th{border-bottom-color:var(--line-2)}
main.ax .tbl.ax-t td.c-end{font-size:14px;color:var(--bone)}
main.ax .tbl.ax-t td.c-end.amt-peak{color:var(--core)}
main.ax .tbl.ax-t td.c-end.dim{color:var(--ash)}
main.ax .tbl.ax-t tr[data-t] .t-cell b::before{display:inline-block;margin-right:8px;padding:1px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.08em;line-height:1.5;vertical-align:2px;color:var(--ash)}
main.ax .tbl.ax-t tr[data-t="dep"] .t-cell b::before{content:"IN"}
main.ax .tbl.ax-t tr[data-t="wd"] .t-cell b::before{content:"OUT"}
main.ax .tbl.ax-t tbody tr:hover{background:var(--char-2)}

/* ================= HELP ================= */
/* topics: element cells (number, kind, symbol), the brand's "matter" idea, not a row of icon cards */
[data-page="help-faq"] main .of-els .hc-topic{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;min-height:0;padding:16px 18px 18px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
[data-page="help-faq"] main .of-els .hc-topic:hover{background:var(--char-2);box-shadow:inset 0 0 0 1px var(--line-2)}
[data-page="help-faq"] main .of-els .hc-topic:active{transform:scale(.99)}
.hc-el{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.hc-el-s{grid-column:1/-1;margin:14px 0 14px -2px;font-family:var(--display);font-size:52px;font-weight:700;line-height:.8;letter-spacing:-.04em;text-transform:none;color:transparent;-webkit-text-stroke:1.2px var(--line-3);transition:-webkit-text-stroke-color .2s}
.hc-topic:hover .hc-el-s,.hc-topic:focus-visible .hc-el-s{-webkit-text-stroke-color:var(--flare)}
[data-page="help-faq"] main .of-els .hc-topic b{grid-column:1;grid-row:2;margin-top:0}
[data-page="help-faq"] main .of-els .hc-topic small{grid-column:1;grid-row:3}
[data-page="help-faq"] main .of-els .hc-topic>svg:last-child{grid-column:2;grid-row:2/4;align-self:end}
/* search: the field reads as a console line with a mono prompt */
[data-page="help-faq"] main .hc-hub .hc-q{background:var(--soot);box-shadow:inset 0 0 0 1px var(--line-2)}
[data-page="help-faq"] main .hc-hub .hc-q input::placeholder{color:var(--ash)}

/* FAQ everywhere on these pages: numbered questions, calm toggle (Cloud Dancer when open, not Flare) */
:is([data-page^="help-"],[data-page^="legal-"]) main .acc-group{counter-reset:ofq}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc:not([hidden]){counter-increment:ofq}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc>summary::before{content:counter(ofq,decimal-leading-zero);flex:none;width:24px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ash)}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc>summary:hover{color:var(--bone)}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc>summary:hover::after{background-color:var(--char-3)}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc[open]>summary::before{color:var(--bone)}
:is([data-page^="help-"],[data-page^="legal-"]) main .acc[open]>summary::after{background-color:var(--bone)}
@media (min-width:768px){:is([data-page^="help-"],[data-page^="legal-"]) main .acc-b{padding-left:40px}}

/* check lists: thin marks, not green ticks everywhere */
:is([data-page^="help-"]) main .hc-chk:not(.no):not(.mut)>li>svg{color:var(--bone)}
/* numbered how-to steps: outlined numerals */
:is([data-page^="help-"]) main .hc-ol>li::before{width:auto;height:auto;background:none;border-radius:0;font-family:var(--display);font-size:22px;font-weight:700;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--line-3);content:counter(hc,decimal-leading-zero)}
:is([data-page^="help-"]) main .hc-ol>li{grid-template-columns:34px minmax(0,1fr)}
/* side contact card + channel icons: outlined discs */
:is([data-page^="help-"]) main :is(.hc-link .i,.hc-card .vpv-ic){background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
:is([data-page^="help-"]) main .hc-link:active,[data-page="about"] main .ab-card:active{transform:scale(.99)}
:is([data-page^="help-"]) main .hc-side>.panel:first-child{overflow:hidden}
:is([data-page^="help-"]) main .hc-side>.panel:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 4%,var(--ember) 30%,var(--flare) 72%,var(--core));opacity:.7}
/* support form: the send button is Cloud Dancer (header CTA is the one Flare) */
[data-page="help-support"] main .hc-form .btn.bone{justify-self:start;min-width:200px}
/* the floating chat never sits on the last lines */
[data-page^="help-"] main .hc-grid{padding-bottom:88px}

/* VIP limits: a heat ladder, the player's level marked */
.of-ladder .of-t{flex:none;width:14px;height:14px;border-radius:50%;background:var(--char-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.of-ladder .lv1 .of-t{background:var(--oxide)}
.of-ladder .lv2 .of-t{background:var(--ember);box-shadow:0 0 8px rgba(142,21,4,.8)}
.of-ladder .lv3 .of-t{background:var(--flare);box-shadow:0 0 10px rgba(255,153,0,.45)}
.of-ladder .lv4 .of-t{background:var(--core);box-shadow:0 0 12px rgba(255,241,214,.45)}
.of-ladder .lv5 .of-t{background:var(--orb);box-shadow:0 0 14px rgba(255,153,0,.5)}
.of-ladder tr.of-you{background:linear-gradient(90deg,rgba(142,21,4,.2),transparent 60%)}
.of-you-t{display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 6px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2);vertical-align:2px}

/* ================= LEGAL ================= */
[data-page^="legal-"] main .lg-doc .prose h2{display:flex;align-items:baseline;gap:14px;padding-top:28px;border-top:1px dashed var(--line-2)}
[data-page^="legal-"] main .lg-doc .prose h2:first-child{padding-top:0;border-top:0}
[data-page^="legal-"] main .prose h2 .lg-n{flex:none;min-width:1.9em;font-size:1.6em;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--line-3)}
[data-page^="legal-"] main .toc a .lg-n{display:inline-block;min-width:22px;margin-right:4px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ash)}
[data-page^="legal-"] main .toc a[aria-current] .lg-n{color:var(--bone)}
[data-page^="legal-"] main .lg-side .panel:first-child{overflow:hidden}
[data-page^="legal-"] main .lg-side .panel:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 4%,var(--ember) 30%,var(--flare) 72%,var(--core));opacity:.7}
[data-page^="legal-"] main .lg-side .kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ================= ABOUT (brand page) ================= */
[data-page="about"] main .ab-h1{display:flex;flex-direction:column-reverse;gap:10px;font-size:var(--h1);line-height:1.05}
[data-page="about"] main .ab-h1 .eyebrow{margin:0;font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.06em}
[data-page="about"] main .ab-slogan{margin:4px 0 0}
/* four states heat up from Char to the Plasma gradient */
[data-page="about"] main .ab-states li:nth-child(2){background:radial-gradient(130% 120% at 100% 100%,rgba(66,8,4,.7),var(--char) 70%)}
[data-page="about"] main .ab-states li:nth-child(3){background:radial-gradient(130% 120% at 100% 100%,rgba(142,21,4,.75),var(--char) 78%)}
[data-page="about"] main .ab-states .k{display:flex;justify-content:space-between}
[data-page="about"] main .ab-states li:not(:last-child)::after{content:"→";position:absolute;right:18px;top:20px;font-family:var(--mono);font-size:13px;color:var(--line-3)}
/* materials */
.ab-mat{display:grid;gap:24px}
.ab-mat-h{display:grid;gap:12px;max-width:760px}
.ab-mat-h h2{font-size:clamp(24px,3.2vw,44px);line-height:1;letter-spacing:-.02em}
.ab-mat-h p{max-width:60ch;font-size:16px;line-height:1.65;color:var(--bone-2)}
.ab-objs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ab-obj{margin:0;display:grid;align-content:start;border-radius:var(--r-l);background:var(--char);overflow:hidden;min-width:0}
.ab-obj-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--soot)}
.ab-obj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .6s var(--ease)}
.ab-obj-img::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(0deg,var(--char),transparent);pointer-events:none}
.ab-obj:hover .ab-obj-img img{scale:1.04}
.ab-obj figcaption{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px 14px;padding:0 20px 20px;margin-top:-34px}
.ab-obj-n{grid-row:1;font-family:var(--display);font-size:64px;font-weight:700;line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(243,240,235,.42)}
.ab-obj figcaption>b{grid-row:1;font-family:var(--display);font-size:22px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.ab-spec{grid-column:1/-1;margin:10px 0 0;display:grid}
.ab-spec>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px dashed var(--line-2)}
.ab-spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);align-self:center}
.ab-spec dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--bone)}
.ab-spec>div:last-child dd{color:var(--core)}
@media (prefers-reduced-motion:reduce){.ab-obj-img img{transition:none}.ab-obj:hover .ab-obj-img img{scale:1}}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  main.ax .ax-vf-nav{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "m" "st" "sf";column-gap:0}
  .ab-objs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  /* verification strip on phones: four cells, numerals 24 */
  :is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps{gap:4px}
  :is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step{padding-top:14px;gap:2px}
  :is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step .dot{font-size:24px;margin:6px 0 2px}
  :is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step b{font-size:12px}
  :is(main.ax .ax-vf-nav,[data-page="help-kyc"] main .hc-main) .steps>.step small{font-size:10px}
  [data-page="help-kyc"] main .hc-main .steps>.step small{display:none}
  .of-num{font-size:40px}
  main.ax .ax-vf-main .panel-h{gap:14px}
  main.ax #tp-set>.panel::after,main.ax #tp-sec .ax-2col>.panel::after{top:18px;right:18px}
  /* ledger on phones: every row is a receipt slip. Top rule = ID or bet | date (mono), then title | amount, then status | action */
  main.ax .tbl-wrap:has(>.ax-t){background:none;border-radius:0;overflow:visible}
  main.ax .tbl.cards.ax-t tbody{display:grid;gap:8px}
  main.ax .tbl.cards.ax-t tbody>tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b d" "t w" "s a";gap:0;padding:0 16px 14px;border:0;border-radius:20px;background:var(--char)}
  main.ax .tbl.cards.ax-t tbody>tr:hover{background:var(--char)}
  main.ax .tbl.cards.ax-t tbody>tr:active{background:var(--char-2)}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-b,main.ax .tbl.cards.ax-t tbody>tr>td.c-d{margin:0!important;padding:11px 0 10px!important;border:0;border-bottom:1px dashed var(--line-2);font-size:11px;align-items:center}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-b{grid-area:b;justify-content:flex-start;gap:6px;color:var(--ash)}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-d{grid-area:d;justify-content:flex-end;padding-left:12px!important}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-title{grid-area:t;padding-top:14px!important}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-end{grid-area:w;padding:14px 0 0 12px!important;align-self:start;font-size:16px}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-st{grid-area:s;justify-content:flex-start;align-self:center;padding-top:12px!important;padding-left:52px!important}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-a{grid-area:a;margin:0;padding-top:10px!important;justify-content:flex-end}
  main.ax .tbl.cards.ax-t tbody>tr>td.c-a .btn{width:auto;height:40px;padding:0 16px}
  main.ax .tbl.cards.ax-t .thumb{width:36px;height:36px}
  main.ax .tbl.cards.ax-t .t-cell{align-items:flex-start}
  main.ax .tbl-wrap:has(>.ax-t)>.tbl-foot{padding:14px 2px 0;border-top:0}
  main.ax .ax-sum .stat.of-warm .k::before{width:6px;height:6px}
  /* help: element cells, 2 × 2 */
  .hc-el-s{font-size:40px;margin:10px 0 10px -2px}
  [data-page="help-faq"] main .of-els .hc-topic{padding:14px}
  [data-page^="help-"] main .hc-grid{padding-bottom:calc(var(--bnav-h) + 72px)}
  [data-page^="help-"] main .hc-ol>li{grid-template-columns:30px minmax(0,1fr)}
  [data-page="help-support"] main .hc-form .btn.bone{justify-self:stretch}
  /* legal */
  [data-page^="legal-"] main .lg-doc .prose h2{gap:10px;padding-top:22px}
  [data-page^="legal-"] main .prose h2 .lg-n{font-size:1.5em}
  /* about: objects in a swipe lane */
  .ab-objs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);gap:8px}
  .ab-objs::-webkit-scrollbar{display:none}
  .ab-obj{scroll-snap-align:start;border-radius:22px}
  .ab-obj-n{font-size:52px}
  .ab-obj figcaption{padding:0 16px 16px}
  [data-page="about"] main .ab-hero .ab-h1 .eyebrow{margin-top:0}
  [data-page="about"] main .ab-hero .ab-h1{margin-top:150px;font-size:24px}
  [data-page="about"] main .ab-states li:not(:last-child)::after{right:14px;top:16px}
}
/* help tables (payment methods, departments): the same ledger discs and receipt rules as the account pages */
[data-page^="help-"] main .tbl .thumb{border-radius:50%;background:var(--soot);box-shadow:inset 0 0 0 1px var(--line-2)}
[data-page^="help-"] main .tbl td{border-bottom-style:dashed}
[data-page^="help-"] main .tbl th{border-bottom-color:var(--line-2)}
/* about: the slogan is the display line, the H1 keeps the page rule */
[data-page="about"] main .ab-slogan{font-family:var(--display);font-weight:700;font-size:clamp(44px,6.4vw,96px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
/* help: the chat button tucks away while the page scrolls down (docs.js), back on scroll up */
.hc-fab{transition:transform .25s var(--ease),opacity .2s,background-color .15s}
.hc-fab.of-tuck{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hc-fab{transition:none}}
@media (max-width:767px){
  [data-page="about"] main .ab-slogan{font-size:44px}
  /* identity plate on phones: smaller avatar, ID and "since" on one line, so the tab content starts on the first screen */
  main.ax .ax-id{padding:16px;gap:14px}
  main.ax .ax-who{align-items:flex-start;gap:14px}
  main.ax .ax-who .avatar{width:48px;height:48px;font-size:13px}
  main.ax .ax-who-t{gap:6px}
  main.ax .ax-name{font-size:17px}
  main.ax .who-id .ax-since{flex-basis:auto;margin-left:4px;padding-left:10px;border-left:1px solid var(--line-2)}
  main.ax .who-id .icon-btn.sm{width:36px;height:36px}
  main.ax .who-id .icon-btn.sm::after{content:"";position:absolute;inset:-4px}
  main.ax .ax-bal{padding-top:14px}
  [data-page="help-faq"] main .of-els .hc-topic>svg:last-child{display:none}
}
@media (max-width:380px){main.ax .who-id .ax-since{flex-basis:100%;margin:0;padding:0;border:0}}
/* ---------- /41 OWN FACE C ---------- */

/* ---------- 39a. OWN FACE A follow-up (29.09.2026): switches inside app.js dialogs (wallet bonus switch) show ON in Cloud Dancer, as on the account pages; Flare stays for the one CTA ---------- */
dialog.dlg .switch input:checked{background:var(--bone)}
dialog.dlg .switch input:checked::after{background:var(--soot)}

/* 42. VIP hero on phones: the outlined % sits on its own row, never over the name */
@media (max-width:767px){
  .ofb .vip-top{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
  .ofb .vip-pct{justify-content:flex-start}
}

/* ---------- 43. PM MOBILE FIXES (29.09.2026, review-pm2) ----------
   Invisible 44 px hit areas, the leaderboard pin, timer labels, the wallet responsible-gaming line and the EU cookie
   banner (app.js "cookie consent"). No layout change on the lobby: the hero CTA only gains a transparent hit area. */

/* leaderboard: the pinned "You" row is opaque (the is-me tint was winning and the row under it showed through) */
.lb-r.is-me.lb-pin td{background:linear-gradient(rgba(255,153,0,.12),rgba(255,153,0,.12)),var(--char-2)}
.lb-pin .lb-n small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* countdown unit labels: 9 → 10 px on the retention pages */
.ofb .timer .tm small{font-size:10px}

/* wallet: 18+ and limits one tap away from every deposit and withdrawal */
.wl-rg{display:flex;align-items:center;gap:10px;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--ash)}
.wl-rg .age{width:30px;height:30px;font-size:10px}
.wl-rg .link{color:var(--bone)}
dialog.wl.first .wl-rg{margin-top:0}

/* footer: Cookie settings next to the prototype switch */
.foot-ck{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;font-family:var(--mono);font-size:11px;color:var(--ash);text-decoration:underline;text-underline-offset:3px}
.foot-ck:hover{color:var(--bone)}
.foot-ck:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* EU cookie banner: not modal, bottom-left on desktop (clear of the rail and the help chat button), above the bottom nav on phones */
.ck{position:fixed;z-index:45;left:calc(var(--rail) + 24px);bottom:24px;width:min(460px,calc(100vw - var(--rail) - 48px));padding:18px;border-radius:var(--r-l);background:var(--dlg,#151313);box-shadow:0 0 0 1px var(--line-2),0 24px 60px -12px rgba(0,0,0,.85);color:var(--bone)}
.ck[hidden]{display:none}
.ck-in{display:grid;gap:14px}
.ck-t{margin:0;font-size:13px;line-height:1.5;color:var(--bone-2,var(--bone))}
.ck-t b{color:var(--bone);font-weight:600}
.ck-t .link{color:var(--bone)}
.ck-set{display:grid;gap:12px;padding:12px 0 2px;border-top:1px solid var(--line)}
.ck-set[hidden]{display:none}
.ck-sw{align-items:flex-start}
.ck-sw>span{display:grid;gap:2px}
.ck-sw b{font-size:14px;font-weight:600}
.ck-sw small{font-size:12px;color:var(--ash)}
.ck-sw input:disabled{opacity:.55;cursor:not-allowed}
.ck-sw input:checked{background:var(--bone)}
.ck-sw input:checked::after{background:var(--soot)}
.ck-a{display:flex;flex-wrap:wrap;gap:8px}
.ck-a .btn{flex:1 1 0;min-width:0;white-space:nowrap}
.ck-a .ck-s{flex:0 0 auto}
@media (max-width:960px){.ck{left:24px;width:min(460px,calc(100vw - 48px))}}
@media (max-width:767px){
  .ck{left:8px;right:8px;width:auto;bottom:calc(var(--bnav-h) + 8px);padding:14px;border-radius:22px;max-height:calc(100dvh - var(--bnav-h) - 72px);overflow:auto}
  .ck-in{gap:12px}
  .ck-t{font-size:12.5px}
  .ck-a{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ck-a .btn{height:44px;padding:0 10px;font-size:13px}
  .ck-a .ck-s{grid-column:1 / -1;height:36px}
  .ck-a .ck-s::after{content:"";position:absolute;inset:-4px 0}
  .ck-a .ck-s{position:relative}
  /* the help chat button and sticky action bars step aside while the banner is up */
  body.ck-on .hc-fab{bottom:calc(var(--bnav-h) + 14px + var(--ck-h,0px))}
}

/* 44 px hit areas on phones, no visual change */
@media (max-width:767px){
  .btn.sm:not(.hot){position:relative}
  .btn.sm:not(.hot)::after{content:"";position:absolute;inset:-6px -2px}
  dialog .dlg-h .x,dialog .ntf .x,dialog [data-dismiss]{position:relative}
  dialog .dlg-h .x::after,dialog [data-dismiss]::after{content:"";position:absolute;inset:-4px}
  dialog .seg.block,dialog .seg.wl-type{overflow:visible} /* two to three equal tabs, nothing to scroll; lets the hit areas below reach out */
  dialog .seg>button[role=tab]{position:relative}
  dialog .seg.sm>button[role=tab]::after{content:"";position:absolute;inset:-8px 0}
  dialog .seg.block.sm>button[role=tab]::after{inset:-4px 0} /* notifications: 36 px tabs */
  dialog .seg.block:not(.lg):not(.sm)>button[role=tab]::after{content:"";position:absolute;inset:-6px 0}
  .ctl [data-pass]::after{content:"";position:absolute;inset:-6px}
  main .pick.txt{position:relative}
  main .pick.txt::after{content:"";position:absolute;inset:-6px 0}
  .promo .tile .m-cta{position:relative}
  .promo .tile .m-cta::after{content:"";position:absolute;inset:-6px -2px}
}
/* ---------- /43 PM MOBILE FIXES ---------- */

/* ---------- 44. PM FIXES 2 (29.09.2026, review-pm2 decision table: #3 #5 #6 #7 #11 #13 #15 + brand terms) ----------
   Reality check dialog, optional deposit limit in the first-deposit wallet, the running-game session readout,
   place / day / % as the headline with degrees as a mono second line, zone hints, Heat and Flashpoints sub-labels,
   the profile sheet ×, and every informative 9 px label raised to 10 px. The lobby is not touched: none of these
   selectors match index.html (its Top 10 badges keep their size while the lobby is frozen). */

/* #3 reality check: a locked modal (desktop) / sheet (phones), no ×, no grabber */
@media (min-width:768px){dialog.dlg.rc{width:min(440px,calc(100vw - 32px))}}
.rc .dlg-h{padding-top:24px}
.rc-ht{display:grid;gap:10px;min-width:0}
.rc-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.rc-k svg{color:var(--flare)}
.rc-ev{padding-left:8px;border-left:1px solid var(--line-2);text-transform:none;letter-spacing:0}
.rc-ht h2{font-size:22px;line-height:1.1;text-wrap:balance}
.rc-b{gap:14px}
.rc-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.rc-l>div{display:grid;gap:6px;padding:14px 14px 16px;min-width:0}
.rc-l>div+div{border-left:1px solid var(--line)}
.rc-l dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.rc-l dd{margin:0;font-family:var(--mono);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--bone);white-space:nowrap}
.rc-n{margin:0;font-size:13px;line-height:1.5;color:var(--ash)}
.rc-f{gap:8px}
.rc-a{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-a .btn{width:100%;justify-content:center;white-space:nowrap}
.rc-h{justify-self:center}
@media (max-width:767px){
  .rc .dlg-h{padding:22px 20px 0}
  .rc-ht h2{font-size:19px}
  .rc-l>div{padding:12px 10px 14px}
  .rc-l dd{font-size:15px}
  .rc-a .btn{height:48px;padding:0 10px;font-size:14px}
  .rc-f{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:374px){.rc-l dd{font-size:14px}.rc-a .btn{font-size:13px}}

/* profile: reality check interval + the "Take a break" landing highlight */
.rc-set{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rc-set .lbl{margin:0}
.rc-set.off{opacity:.45;pointer-events:none}
.rc-links{align-items:center;gap:8px 16px}
.panel.rc-hl{box-shadow:inset 0 0 0 1px var(--flare)}

/* #5 optional deposit limit: one collapsed row under the summary, only in the first-deposit wallet */
.wl-dl{display:none}
dialog.wl.first .wl-dl{display:grid;gap:12px;border-radius:var(--r-m);background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.wl-dl-t{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--r-m);font-size:14px;font-weight:500;color:var(--bone)}
.wl-dl-t>svg:first-child{color:var(--ash);flex:none}
.wl-dl-t>svg:last-child{margin-left:auto;color:var(--ash);flex:none;transition:rotate .2s var(--ease)}
.wl-dl-t:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.wl-dl-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-dl-o{flex:none;font-family:var(--mono);font-size:11px;color:var(--ash)}
.wl-dl.open .wl-dl-t>svg:last-child{rotate:180deg}
.wl-dl.set .wl-dl-t>svg:first-child{color:var(--ok)}
.wl-dl-b{display:grid;gap:10px;padding:0 14px 14px}
.wl-dl-b[hidden]{display:none}
.wl-dl-p{display:grid;grid-template-columns:repeat(3,1fr)}
.wl-dl-p .pick{justify-content:center;height:36px}
.wl-dl-r{display:flex;gap:8px;align-items:center}
.wl-dl-r .ctl{flex:1;min-width:0}
.wl-dl-r .ctl.err{box-shadow:inset 0 0 0 1px var(--fail)}
.wl-dl-b .hint{margin:0}
dialog.wl.first .wl-dl{grid-template-columns:minmax(0,1fr);min-width:0}
.wl-dl-b{min-width:0}
.wl-dl-r .ctl.amount{height:44px;padding:0 14px;background:var(--dlg)}
.wl-dl-r .ctl.amount input{min-width:0;width:100%;font-size:16px}
.wl-dl-r .btn{flex:none}
.wl-dl-r .btn:not(.quiet){background:var(--char-3)}
.wl-dl-p{min-width:0}
.wl-dl-p .pick{min-width:0;padding:0 6px}
@media (max-width:767px){.wl-dl-p .pick{height:40px}}

/* #15 running game: session clock + Limits, small and mono, opposite the mode tag */
.gv-ses{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 4px 0 10px;border-radius:var(--r-pill);background:rgba(12,12,12,.6);font-family:var(--mono);font-size:11px;color:var(--bone-2);font-variant-numeric:tabular-nums}
.gv-ses>svg{color:var(--ash)}
.gv-ses-l{position:relative;display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:2px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--bone);text-decoration:none}
.gv-ses-l:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.gv-ses-l:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
@media (max-width:767px){.gv-ses-l::after{content:"";position:absolute;inset:-12px -6px}}

/* #7 the number the player needs first, degrees second (smaller, mono). Brand look unchanged */
.tz-h{align-items:flex-end}
.tz-me{justify-items:start}
.tz-me .eyebrow{margin-bottom:2px}
.ofb .tz-me .tn-pl{font-size:64px}
.tz-read{justify-items:end;text-align:right;gap:6px}
.tz-deg{font-family:var(--mono);font-weight:500;font-size:18px;line-height:1;letter-spacing:0;text-shadow:none}
.tz-z{font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--ash)}
.tz-hint{position:relative;display:flex;margin-top:-4px;font-family:var(--mono);font-size:10px;line-height:1.2;color:var(--ash)}
.tz-hint span{padding-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-h0{flex:none;border-top:1px solid var(--line-2)}
.tz-h1{flex:1;padding-left:8px;border-top:1px solid var(--flare);color:var(--bone-2)}
.tn-deg{font-family:var(--mono)}
.ofb .tn-me small.tn-deg{font-size:11px;letter-spacing:.01em}
.ofb .tn-me:has(.tn-deg) b{font-family:var(--body);font-size:15px;font-weight:600}
.ofb .tn-feat-me b{font-family:var(--body);font-size:17px;font-weight:600}
@media (max-width:767px){
  .ofb .tz-me .tn-pl{font-size:52px}
  .tz-deg{font-size:16px}
}
/* Heat: the day is the headline, the degrees a mono line */
.hm-deg{display:grid;gap:10px;justify-items:start}
.hm-day{display:inline-flex;align-items:baseline;gap:10px}
.hm-dk{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--bone)}
.hm-day small{font-family:var(--mono);font-size:13px;color:var(--ash)}
.hm-dg{font-family:var(--mono);font-size:12px;color:var(--ash)}
.hm-dg b{font-family:var(--mono);font-size:12px;font-weight:500;line-height:inherit;letter-spacing:0;color:var(--flare);text-shadow:none}
body.is-guest .hm-dg b{color:var(--ash);-webkit-text-stroke:0}
@media (max-width:767px){.hm-dk{font-size:16px}}

/* brand terms: Flashpoints sub-label, Heat · daily rewards in the Menu */
.ttl-sub{flex:none;font-family:var(--mono);font-size:11px;color:var(--ash);white-space:nowrap}
.mlist .ml-t{display:grid;gap:1px;line-height:1.2}
.mlist .ml-t small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ash)}
@media (max-width:767px){.row-h:has(.ttl-sub){flex-wrap:wrap}.ttl-sub{font-size:10px}}

/* #13 profile sheet / pop-over: × in the identity row, like the other sheets */
.pm-who>.x{margin-left:auto;align-self:flex-start}
.pm-n{flex:1}
@media (max-width:767px){.pm-who>.x{position:relative}.pm-who>.x::after{content:"";position:absolute;inset:-4px}}

/* #11 no informative label under 10 px (layout unchanged: the boxes keep their size) */
.timer .tm small{font-size:10px}
.sr-grid .gc .cv-p{font-size:10px}
.wl-more .opt-ic{font-size:10px}
.stsw>button small{font-size:10px}
.tz-seg em{font-size:10px}
.gk .gc .gt{font-size:10px}
.jp-st{font-size:10px}
.wh-k{font-size:10px}
.cb-n{font-size:10px}
.vtbl thead th{font-size:10px}
.ofb .hm-cal .rw-now{font-size:10px}
main.ax .tbl.ax-t tr[data-t] .t-cell b::before{font-size:10px}
.gv-rd{font-size:10px}
[data-catalog] .games:not(.wide) .gc .cv-p{font-size:10px}
[data-catalog] .games:not(.wide) .gc .badge,[data-catalog] .games:not(.wide) .gc .pill{font-size:10px}
@media (max-width:767px){
  .tz-seg em{font-size:10px;letter-spacing:0}
  .gk .gc .gt{font-size:10px}
}
/* ---------- /44 PM FIXES 2 ---------- */

/* =====================================================================
   45. I18N RU (29.09.2026) — assets/js/i18n.js, assets/i18n/ru-*.js, COMPONENTS.md section 17.
   Everything here is scoped to html[lang="ru"], so the English pages do not change by a pixel.
   ===================================================================== */
/* language dialog: in Russian the Russian row shows only its native name (no "Русский / Русский") */
html[lang="ru"] .radio-row[data-lang="Русский"] .ol-t small{display:none}
/* legal documents stay English: a small note above the text (i18n.js adds it only in RU) */
.i18n-note{display:flex;align-items:center;gap:8px;margin:0 0 20px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--char);color:var(--bone-2);font:500 14px/1.4 var(--body);letter-spacing:0;text-transform:none}
.i18n-note svg{color:var(--pend)}
.i18n-note svg{flex:none}
/* ---------- /45 I18N RU ---------- */

/* =====================================================================
   48. RU ACCOUNT + HELP (29.09.2026) — assets/i18n/ru-account.js, ru-help.js.
   Scoped to html[lang="ru"]: the English pages do not change.
   ===================================================================== */
/* ledger marks (section 41 sets them as CSS content): the usual Russian pair for money in / out of the account */
html[lang="ru"] main.ax .tbl.ax-t tr[data-t="dep"] .t-cell b::before{content:"ВВОД"}
html[lang="ru"] main.ax .tbl.ax-t tr[data-t="wd"] .t-cell b::before{content:"ВЫВОД"}
/* verification: the phone number keeps more room next to the longer «Выслать код» */
html[lang="ru"] #vf-tel-send{padding-inline:12px}
@media (max-width:767px){
  /* about: «СОСТОЯНИЕ» is a longer word than "STATE"; one size step down so it stays inside the hero at 360 */
  html[lang="ru"] [data-page="about"] main .ab-slogan{font-size:min(44px,10.8vw)}
}
/* ---------- /48 RU ACCOUNT + HELP ---------- */

/* =====================================================================
   47. RU PROMO (29.09.2026) — assets/i18n/ru-promo.js: bonuses, promo, promo-one, vip, tournaments, tournament, jackpots, rewards.
   Scoped to html[lang="ru"]: the English pages do not change.
   ===================================================================== */
/* Heat calendar: «Сегодня» is two letters longer than "Today" and must stay inside the 360 px cell */
html[lang="ru"] .ofb .hm-cal .rw-now{letter-spacing:0}
@media (max-width:400px){html[lang="ru"] .ofb .hm-cal .rw-now{font-size:8.5px}html[lang="ru"] .ofb .hm-cal .rw-v{letter-spacing:-.06em}}
/* tournament card: «18 640 оч. · 1 420°» keeps one line next to the wider «Играть» */
@media (max-width:400px){html[lang="ru"] .ofb .tn-me small.tn-deg{font-size:10.5px;letter-spacing:0}}
/* ---------- /47 RU PROMO ---------- */

/* =====================================================================
   46. RU CASINO + FIXES (29.09.2026) — assets/i18n/ru-casino.js; two shell fixes (Menu cashback banner, sign-up sheet).
   RU rules are scoped to html[lang="ru"]. The two fixes apply to both languages; the lobby first screen does not change.
   ===================================================================== */
/* Menu sheet: the cashback banner's button sat on the "weekly cashback" caption on phones. The ≤767 hit-area rule of
   section 43 (.btn.sm:not(.hot){position:relative}) overrode position:absolute, so the button fell back into the text column.
   Pin it bottom-right again, over the photo, clear of the caption (the hit area ::after still works: absolute is a containing block). */
.mn .mn-bn .btn.sm.bn-cta{position:absolute;right:14px;bottom:14px;left:auto;top:auto;margin:0}
.mn-bn .bn-t{max-width:calc(100% - 120px)}
/* Sign-up sheet: the e-mail hint keeps its line while it is hidden, so the sheet never changes height as validation
   shows or clears it (the password hint is always shown in sign-up). Only in sign-up mode; the log-in sheet is unchanged. */
.lg:has(#lg-su:not([hidden])) #lg-email-h[hidden]{display:block!important;visibility:hidden}
/* Phones: 16px text in the log-in / sign-up fields. At 15px iOS Safari zooms the page in when a field takes focus and
   keeps it zoomed, so the pinned Create account button is no longer where the thumb expects it and the tap hits the
   footer text. The sheet is also pinned by its bottom edge (inset), not by an auto top margin, so a re-layout can
   never move the footer off the screen edge. */
@media (max-width:767px){
  .lg .ctl input{font-size:16px}
  dialog.dlg.lg{margin:0;inset:auto 0 0 0}
}
/* RU game page: the guest's stage pair «▷ Демо | Играть на деньги» stays one joined pill at 360 */
html[lang="ru"] .gp .gv-go .btn{padding:0 18px}
/* ---------- /46 RU CASINO + FIXES ---------- */

/* 51. No layout shift when a dialog locks scroll: keep the scrollbar gutter reserved */
html{scrollbar-gutter:stable}

/* =====================================================================
   49. FINAL QA (29.09.2026) — safe, non-structural fixes from the full matrix (5 widths × EN/RU × guest/player).
   Hit areas are invisible (no visual change, the lobby first screen stays pixel-identical); the rest is overflow,
   contrast and the non-lobby cover titles. The lobby's own sizes are untouched.
   ===================================================================== */

/* 49.1 Overflow on phones (RU): nothing may push the page wider than the screen */
/* Heat · Invite a friend: the read-only link field and the guest button no longer set the column's min width */
.rf-a{min-width:0}
.rf-link input{width:0}
@media (max-width:767px){
  .rf-a .btn.ghost{white-space:normal;height:auto;min-height:44px;padding-block:10px;line-height:1.25;text-align:center}
}

/* 49.2 Tournament leaderboard: the pinned "You" row keeps «2 138 до топ-25» whole at 360 */
@media (max-width:400px){
  .ofb .lb-t .lb-z{width:74px}
  .lb-pin .lb-n small{font-size:10.5px;letter-spacing:-.01em}
}

/* 49.3 Cover titles outside the lobby (≤767): catalog / category grids and the rails on game, tournament, jackpots,
   profile favourites. 13 px Loos, two lines with an ellipsis, provider line 11 px. index.html keeps its sizes. */
@media (max-width:767px){
  body:not([data-page="lobby"]) :is(.games:not(.wide),.lane,.slots.lane) .gc .cv-t{font-size:13px;line-height:1.08;-webkit-line-clamp:2;text-overflow:ellipsis;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  body:not([data-page="lobby"]) :is(.games:not(.wide),.lane,.slots.lane) .gc .cv-p{font-size:11px}
}

/* 49.4 Contrast (WCAG AA 4.5:1 on small labels): same colours, less transparency */
.cb-n{opacity:.9}
.foot-ph{color:rgba(156,149,146,.86)}
.pv-ty{color:rgba(156,149,146,.9)}
.stsw>button small{opacity:.86}

/* 49.5 44 px hit areas on phones, invisible. One helper: a centred box at least 44 × 44 behind the target. */
@media (max-width:767px){
  :is(.hdr .nav>.lm,.foot-brand .lm,.wallet .bal,.crumbs a,.row-h a.ttl,.row-h a.all,.foot-ck,.kv dd a,.hf .t-cell b>a,main h3>a,
      .gv-prov a,#g-prov-l a,.lg-orgs a,.tbl-foot a.link,.icon-btn.gv-bell,.hc-card a.link,#lg-forgot,#lg-sw .link,.dlg-h>.lm,.lg-legal a,.sr-rc-t,.bnp-gst-l .link){position:relative}
  :is(.hdr .nav>.lm,.foot-brand .lm,.wallet .bal,.crumbs a,.row-h a.ttl,.row-h a.all,.foot-ck,.kv dd a,.hf .t-cell b>a,main h3>a,
      .gv-prov a,#g-prov-l a,.lg-orgs a,.tbl-foot a.link,.icon-btn.gv-bell,.hc-card a.link,#lg-forgot,#lg-sw .link,.dlg-h>.lm,.lg-legal a,.sr-rc-t,.bnp-gst-l .link)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}
  /* neutral / bone / ghost 40 px buttons in pages and dialogs (sizes sm, lg, xl and banner CTAs have their own) */
  :is(main,dialog) .btn:not(.sm):not(.lg):not(.xl):not(.bn-cta):not(.hot){position:relative}
  :is(main,dialog) .btn:not(.sm):not(.lg):not(.xl):not(.bn-cta):not(.hot)::after{content:"";position:absolute;inset:-2px 0}
  /* header Deposit "+" (30 px) and the footer columns */
  .wallet .btn.hot.sm.dep::after{inset:-7px}
  .foot-col a{min-width:44px}
  /* chip lanes scroll sideways and clip the chips' hit areas: give them room inside the lane, no visual change */
  main .picks.lane-x{padding-block:6px;margin-block:-6px}
  .cp .cf-chips.picks.lane-x{padding-block:6px;margin-block:-4px}
  dialog .pick.txt{position:relative}
  dialog .pick.txt::after{content:"";position:absolute;inset:-2px 0}
  .hdr .chips{padding-top:6px;margin-top:-2px}
  .hdr .chips a.chip{position:relative}
  .hdr .chips a.chip::after{content:"";position:absolute;inset:-6px 0}
  /* Heat feed tabs: 40 → 44 */
  .hf-tabs [role=tab]{min-height:44px}
}
/* 49.6 Notifications promo banner: the ≤767 hit-area rule of section 43 (.btn.sm{position:relative}) put Play back into the
   text column over «on Gates of Olympus 1000». Pin it bottom-right again (as section 46 does for the Menu banner); the copy keeps clear of it. */
.nt-bn .btn.sm.bn-cta{position:absolute;right:14px;bottom:14px;left:auto;top:auto;margin:0}
.nt-bn .bn-t{max-width:calc(100% - 96px)}
/* ---------- /49 FINAL QA ---------- */

/* =====================================================================
   50. BANNER ART (29.09.2026) — the designer's banner visuals, Figma "PLAZMO — Identity" › VISUAL (48:330).
   Files: assets/img/banners/<name>.webp (1586 × 800) + <name>-m.webp (800 × 404). Each is the whole banner
   background WITHOUT text: dark → Ember → Flare gradient with the object on the right. Copy and buttons stay live HTML.
   ribbons · fur-dice · glass-ball · lava-sphere · lava-rocks · rock · cash-glass · glass-x-shards · molten-x
   One rule for every holder (.tile, .bn, .of-art, .bact-art): full-bleed cover, object anchored right, no blend or mask
   (the old cut-out objects needed lighten + a left fade). !important only here, to beat the per-banner geometry of the
   cut-out era (.bn-pair, .vp-cb, .lg-b, .wp-1 … up to 0,3,1). Per-art focus point: --art-pos on the <img>.
   ===================================================================== */
img[src*="img/banners/"]{--art-pos:100% 50%}
img[src*="banners/fur-dice"]{--art-pos:100% 38%}
img[src*="banners/glass-ball"]{--art-pos:88% 50%}
img[src*="banners/lava-sphere"]{--art-pos:86% 50%}
img[src*="banners/lava-rocks"]{--art-pos:92% 45%}
img[src*="banners/rock"]{--art-pos:92% 30%}
img[src*="banners/cash-glass"]{--art-pos:84% 40%}
img[src*="banners/glass-x-shards"]{--art-pos:78% 45%}
img[src*="banners/molten-x"]{--art-pos:80% 45%}

:is(.tile,.bn,.of-art,.bact-art)>img[src*="img/banners/"]{
  inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;translate:none!important;
  object-fit:cover!important;object-position:var(--art-pos)!important;
  mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important}
/* lobby-style heroes move the art by ±3 px on pointer move (--px/--py): bleed a little so no edge shows */
.t-main>img[src*="img/banners/"]{inset:-6px!important;top:-6px!important;left:-6px!important;width:calc(100% + 12px)!important;height:calc(100% + 12px)!important}
/* the cut-out era dimmed some objects on phones; the art is the whole background now */
.p-hero>img[src*="img/banners/"],.bn.head>img[src*="img/banners/"]{opacity:1}
.ab-obj-img img[src*="img/banners/"]{object-position:var(--art-pos)}

/* legibility: the art is already near-black on the left (the gradient starts at #000); a soft scrim on the text side
   keeps copy AA over the busier crops. Phones: text sits low and over the object, so the scrim also rises from the bottom. */
:is(.tile,.bn,.of-art):has(>img[src*="img/banners/"])::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,12,12,.62) 0,rgba(12,12,12,.3) 34%,rgba(12,12,12,0) 60%)!important}
.bn.bonus:has(>img[src*="img/banners/"])::before,.bn.strip:has(>img[src*="img/banners/"])::before{background:linear-gradient(90deg,rgba(12,12,12,.7) 0,rgba(12,12,12,.35) 45%,rgba(12,12,12,0) 75%)!important}
.of-art:has(>img[src*="img/banners/"])::before{background:linear-gradient(20deg,rgba(12,12,12,.8) 0,rgba(12,12,12,.35) 40%,rgba(12,12,12,0) 65%)!important}
@media (max-width:767px){
  :is(.tile,.bn):has(>img[src*="img/banners/"])::before{background:linear-gradient(0deg,rgba(12,12,12,.72) 0,rgba(12,12,12,.3) 42%,rgba(12,12,12,0) 64%),linear-gradient(90deg,rgba(12,12,12,.5) 0,rgba(12,12,12,0) 62%)!important}
  /* mobile lobby carousel: 148 px slides, copy on the left; the object keeps the right half */
  .promo .tile:has(>img[src*="img/banners/"])::before{background:linear-gradient(90deg,rgba(12,12,12,.72) 0,rgba(12,12,12,.38) 42%,rgba(12,12,12,0) 66%)!important}
}
/* catalog header (.bn.head.hd): the outlined game count stays above the art (phones keep no art, section 40) */
.cp .bn.head.hd .hd-num{z-index:-1}
/* ---------- /50 BANNER ART ---------- */

/* =====================================================================
   52. GAME COVERS (29.09.2026) — the designer's cover art, Figma "Rio Redesign" › ✅ Slots (255:9841), component "Game".
   Files: assets/img/games/<slug>.jpg, 360 × 480 (3:4, the .gc ratio). Markup: .gc.has-cov > .gc-art > img, first child
   (app.js COVERS / coverArt / paintCovers; static lobby tiles carry the same markup). The art has NO game logo, so the
   title stays live text over the cover (same place, same sizes) and a bottom scrim inside the card keeps it readable.
   Cards without a cover keep the hatched placeholder. The art sits at z-index −1 inside the isolated .gc, so the corner tab,
   badges, title, provider and the hover play button stay on top; the edge and hover glow move to .gc-art::after
   (an inset shadow on .gc itself would be painted under the art).
   ===================================================================== */
/* Covers 2 (29.09.2026, art-direction pass): eased bottom scrim over the lower ~52 %, per-cover focal points,
   badge backdrops, a branded placeholder for games without art, hover zoom + lift of the art.
   Covers 3 (29.09.2026): 51 covers, all from the reference lobby tmrlnmov97-lang.github.io/rio-preview (app.js COVERS);
   live tables and video poker have no reference art and keep the branded placeholder. */
.gc-art{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;background:#1c191a;pointer-events:none}
.gc-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 30%);transform-origin:var(--fp,50% 30%);
  transition:transform .5s var(--ease),filter .3s var(--ease)}
/* scrim: the art stays untouched in the top half; eased stops (no visible band) reach .92 Soot under the provider line */
.gc-art::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(12,12,12,0) 46%,rgba(12,12,12,.2) 56%,rgba(12,12,12,.52) 68%,rgba(12,12,12,.8) 82%,rgba(12,12,12,.92) 100%);
  box-shadow:inset 0 0 0 1px rgba(243,240,235,.1);transition:box-shadow .2s}
/* 16:10 live tiles: the text block is taller relative to the card, so the scrim starts higher */
.gc.wide .gc-art::after{background:linear-gradient(180deg,rgba(12,12,12,0) 30%,rgba(12,12,12,.3) 48%,rgba(12,12,12,.7) 70%,rgba(12,12,12,.92) 100%)}
.gc.has-cov::before{display:none}
.gc.has-cov .cv-t{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.35)}
.gc.has-cov .cv-p{color:rgba(243,240,235,.84);text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* focal points: the key subject (face, head, hero object) stays in frame when the card is not 3:4
   (16:10 live tiles, 1:1 thumbnails) and is the anchor of the hover zoom */
/* Covers 3 (29.09.2026): all art from the reference lobby (rio-preview). Focal points for the non-3:4 frames
   (16:10, 1:1 thumbnails, game page) and the hover zoom: faces and hero objects stay in frame */
.gc-art img[src*="/gates-of-olympus-1000.jpg"]{--fp:50% 10%}
.gc-art img[src*="/sweet-bonanza-1000.jpg"]{--fp:50% 34%}
.gc-art img[src*="/sugar-rush-1000.jpg"]{--fp:50% 40%}
.gc-art img[src*="/fortune-tiger.jpg"]{--fp:50% 24%}
.gc-art img[src*="/fortune-dragon.jpg"]{--fp:50% 22%}
.gc-art img[src*="/mental-ii.jpg"]{--fp:50% 36%}
.gc-art img[src*="/tombstone-slaughter.jpg"]{--fp:50% 22%}
.gc-art img[src*="/duck-hunters.jpg"]{--fp:46% 28%}
.gc-art img[src*="/kill-em-all.jpg"]{--fp:50% 34%}
.gc-art img[src*="/dead-or-alive-ii.jpg"]{--fp:50% 22%}
.gc-art img[src*="/mighty-wild-panther.jpg"]{--fp:56% 34%}
.gc-art img[src*="/mighty-fish-blue-marlin.jpg"]{--fp:50% 30%}
.gc-art img[src*="/big-bass-boxing-bonus-round.jpg"]{--fp:50% 18%}
.gc-art img[src*="/3x-catch.jpg"]{--fp:60% 18%}
.gc-art img[src*="/bigtuna-bonanza.jpg"]{--fp:50% 24%}
.gc-art img[src*="/coins-of-leprechaun.jpg"]{--fp:50% 24%}
.gc-art img[src*="/lion-gems-3-pots.jpg"]{--fp:50% 34%}
.gc-art img[src*="/12-bells.jpg"]{--fp:50% 30%}
.gc-art img[src*="/aviator.jpg"]{--fp:50% 30%}
.gc-art img[src*="/spaceman.jpg"]{--fp:50% 26%}
.gc-art img[src*="/big-bass-crash.jpg"]{--fp:50% 18%}
.gc-art img[src*="/hilo.jpg"]{--fp:55% 30%}
.gc-art img[src*="/crash.jpg"]{--fp:50% 24%}
.gc-art img[src*="/mines.jpg"]{--fp:40% 50%}
/* baked-title tiles (app.js COVERS 2): the art carries the name and the studio, so the live title and provider are kept
   for screen readers, search and i18n but hidden visually, and the scrim goes (only the hairline edge stays) */
.gc.cov-logo .cv-t,.gc.cov-logo .cv-p{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.gc.cov-logo .gc-art::after{background:none}
.gc.cov-logo .gc-art img{--fp:50% 0%}
/* hover (desktop): the art zooms 4 % around its focal point and brightens; the card box never moves or resizes */
.gcard:hover .gc.has-cov .gc-art::after,.gcard:focus-visible .gc.has-cov .gc-art::after{box-shadow:inset 0 0 0 1.5px var(--flare)}
.gk:hover .gc.has-cov .gc-art::after,.gk:focus-visible .gc.has-cov .gc-art::after{box-shadow:inset 0 0 0 1.5px var(--flare),inset 0 -90px 70px -50px rgba(255,153,0,.26)}
@media (hover:hover){.gcard:hover .gc.has-cov .gc-art img{transform:scale(1.04);filter:brightness(1.1) saturate(1.06)}}
.gcard:focus-visible .gc.has-cov .gc-art img{transform:scale(1.04);filter:brightness(1.1) saturate(1.06)}
/* badges over art: the lobby's HOT / NEW pills get a soft shadow ring, the own-face corner tab (mono label + heat dot)
   a denser blurred Soot backdrop and a hairline, so both read on any cover */
.gc.has-cov .badge{box-shadow:0 0 0 1px rgba(12,12,12,.25),0 2px 10px rgba(0,0,0,.5)}
.gc.has-cov .pill{background:rgba(12,12,12,.66);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(243,240,235,.1)}
.gc.has-cov .gt{background:rgba(12,12,12,.7);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset -1px -1px 0 rgba(243,240,235,.14),2px 2px 12px -2px rgba(0,0,0,.45)}
/* thumbnails without text (search, recommendations, challenges): no scrim */
.gc.sq.has-cov .gc-art::after{background:none}
@media (prefers-reduced-motion:reduce){.gc-art img{transition:none}.gcard:hover .gc.has-cov .gc-art img,.gcard:focus-visible .gc.has-cov .gc-art img{transform:none}}

/* --- branded placeholder (no art yet): a Char poster with the game's name set large in outlined Loos over a faint
   heat glow, so the tile reads as intentional. The name comes from data-nm (gcard / paintCovers); the lobby's static tiles
   never get data-nm, so they stay as authored. The glow sits right / left / centre by position so a row never repeats. --- */
.gc[data-nm]:not(.has-cov):not(.sq){container-type:inline-size;
  background:linear-gradient(115deg,transparent 42%,rgba(243,240,235,.06) 50%,transparent 58%) 130% 0/260% 100% no-repeat,
    radial-gradient(120% 70% at var(--gx,30%) 112%,rgba(255,153,0,.26),rgba(229,72,0,.1) 45%,transparent 72%),
    linear-gradient(180deg,#1a1718 0,#141213 100%)}
.gcard:nth-child(3n+2) .gc[data-nm]:not(.has-cov){--gx:70%}
.gcard:nth-child(3n) .gc[data-nm]:not(.has-cov){--gx:50%}
.gc[data-nm]:not(.has-cov):not(.sq)::before{content:attr(data-nm);inset:max(30px,11%) 7% auto 9%;width:auto;height:auto;translate:none;
  -webkit-mask:none;mask:none;background:none;
  font-family:var(--display);font-weight:700;font-size:12.5cqw;line-height:1;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:normal;
  color:transparent;-webkit-text-stroke:1px rgba(243,240,235,.24);transition:-webkit-text-stroke-color .2s,opacity .2s}
.gc.wide[data-nm]:not(.has-cov)::before{font-size:8cqw;top:max(34px,17%);right:30%}
.gcard:hover .gc[data-nm]:not(.has-cov)::before,.gcard:focus-visible .gc[data-nm]:not(.has-cov)::before{opacity:.55;-webkit-text-stroke-color:rgba(255,153,0,.7)}

/* phones: 3-up catalog grids give a 13 px title (QA pass) three lines instead of an ellipsis on the second one,
   and slightly tighter insets so long names fit; the lobby keeps its own sizes */
@media (max-width:767px){
  body:not([data-page="lobby"]) :is(.games:not(.wide),.lane,.slots.lane) .gc{padding:9px 8px 9px}
  body:not([data-page="lobby"]) :is(.games:not(.wide),.lane,.slots.lane) .gc .cv-t{-webkit-line-clamp:3}
}
/* lobby badges = catalog badges on phones: the lobby's static tiles have no .gk, so the .gk-scoped phone sizes of the corner
   tab and the heat meter (section 39 / 44) are repeated for them; nothing else in the lobby tiles changes */
@media (max-width:767px){
  body[data-page="lobby"] .gcard:not(.gk) .gc .gt{height:18px;padding:0 7px 0 6px;gap:4px;font-size:10px;border-radius:0 0 8px 0}
  body[data-page="lobby"] .gcard:not(.gk) .gt::before{width:5px;height:5px}
  body[data-page="lobby"] .gcard:not(.gk) .hmt{height:8px}
  body[data-page="lobby"] .gcard:not(.gk) .hmt i:nth-child(1){height:3px}body[data-page="lobby"] .gcard:not(.gk) .hmt i:nth-child(2){height:5px}
  body[data-page="lobby"] .gcard:not(.gk) .hmt i:nth-child(3){height:6px}body[data-page="lobby"] .gcard:not(.gk) .hmt i:nth-child(4){height:8px}
}
/* desktop density (Covers 3): 8 cards a row from 1280 px in the catalog, category and the lobby / game-page slots rows
   (8 tiles each); 1181–1279 keeps 7 and hides the 8th tile so the row never wraps. Top 10 stays at 5 (section 1). */
@media (min-width:1181px) and (max-width:1279px){.slots:not(.tn-games)>:nth-child(n+8){display:none}}
@media (min-width:1280px){
  .slots:not(.tn-games){grid-template-columns:repeat(8,minmax(0,1fr))}
  .cp [data-catalog] .games:not(.wide){grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* ---------- /52 GAME COVERS ---------- */

/* 53. No cursor-following light spot on hero banners */
.t-main::after{display:none!important}

/* 54. LOGO: the designer's PLAZMO lockup (assets/img/logo.svg) replaces the typed wordmark.
   Text stays in the DOM for screen readers; the shape is painted through a mask so colour follows --logo-c. */
.lm{--logo-c:var(--bone);position:relative;display:inline-block;height:.78em;aspect-ratio:1900/250;width:auto;line-height:0;font-size:inherit;color:transparent!important;text-indent:-9999px;overflow:hidden;white-space:nowrap;background:var(--logo-c);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkwMCIgaGVpZ2h0PSIyNTAiIHZpZXdCb3g9IjAgMCAxOTAwIDI1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCjxnPgo8cGF0aCBkPSJNMTc0Ni41MiAwSDE3NjAuMzRDMTgzOS4yNiAwIDE5MDAgMzkuNjA3NSAxOTAwIDExMS41NTVWMTM4LjgwOEMxOTAwIDIxMS4xMTkgMTgzOS4yNiAyNTAgMTc2MC4zNCAyNTBIMTc0Ni41MkMxNjY2LjE1IDI1MCAxNjA0LjY4IDIxMS4xMTkgMTYwNC42OCAxMzguODA4VjExMS41NTVDMTYwNC42OCAzOS42MDc1IDE2NjYuMTUgMCAxNzQ2LjUyIDBaTTE3NDYuNTIgNTMuNDE1N0MxNjk3Ljc5IDUzLjQxNTcgMTY2Ny45NiA3NC4xMjc5IDE2NjcuOTYgMTEyLjI4MlYxMzcuNzE4QzE2NjcuOTYgMTc1Ljg3MiAxNjk3Ljc5IDE5Ni41ODQgMTc0Ni41MiAxOTYuNTg0SDE3NTguMTZDMTgwNi41MyAxOTYuNTg0IDE4MzYuNzIgMTc1Ljg3MiAxODM2LjcyIDEzNy43MThWMTEyLjI4MkMxODM2LjcyIDc0LjEyNzkgMTgwNi41MyA1My40MTU3IDE3NTguMTYgNTMuNDE1N0gxNzQ2LjUyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyMjIgMy4yNjk1M0gxMzIyLjc0TDEzODcuNDggMTI0LjI3MkgxNDAwLjk0TDE0NjcuMTMgMy4yNjk1M0gxNTYyLjQyVjI0Ni43MjlIMTUwMC41OVY2NS40MDYySDE0ODkuNjhMMTQyNC45NCAxODUuMzE5SDEzNTUuNDhMMTI5MS44MyA2NS40MDYySDEyODAuOTJWMjQ2LjcyOUgxMjIyVjMuMjY5NTNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNjUzLjg4MyAzLjI2OTUzSDc0Ni42MjVMNzc3LjY1MSA3Mi41TDc0MCAxMTQuNUw4MTYuNjkyIDE1OS42MTRMODU1LjczMyAyNDYuNzI5SDc5My45MDVMNzY5LjkwMSAxOTMuMzEzSDYyOC40MjRMNjA0LjQyIDI0Ni43MjlINTQ1LjUwMkw2NTMuODgzIDMuMjY5NTNaTTY5MS43MDcgNTEuNTk4TDY0OS44ODIgMTQ0Ljk4NUg3NDguNDQzTDcwNi42MTggNTEuNTk4SDY5MS43MDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjk2Ljk4NyAzLjI2OTUzSDM1OS4xNzlWMTk2LjIySDUxOS4yMDRWMjQ2LjcyOUgyOTYuOTg3VjMuMjY5NTNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMCAzLjI2OTUzSDE2Mi41NzFDMjI5Ljg1NCAzLjI2OTUzIDI1Ni43NjggMzIuMzM5MyAyNTYuNzY4IDc4Ljg1MDlWOTAuNDc4OEMyNTYuNzY4IDEzOC4wODEgMjI5LjQ5MSAxNjYuNzg3IDE2Mi41NzEgMTY2Ljc4N0g2Mi4xOTE2VjI0Ni43MjlIMFYzLjI2OTUzWk02Mi4xOTE2IDUzLjc3ODJWMTE2LjI3OEgxNTYuMzg4QzE4MC4zOTIgMTE2LjI3OCAxOTMuNDg1IDEwOS4wMTEgMTkzLjQ4NSA4OS4wMjUzVjgwLjY2NzhDMTkzLjQ4NSA2MS40MDkxIDE4MC4zOTIgNTMuNzc4MiAxNTYuMzg4IDUzLjc3ODJINjIuMTkxNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMTUyIDI0Ny4xMTlIOTExVjE3Ni40MzNDOTE5LjE1OCAxNjQuMDA3IDk0OCAxNDggOTgxIDE0My45OTlDMTAxNCAxMzkuOTk4IDEwNzYuODIgMTQyLjQyOCAxMDc2LjgyIDE0Mi40MjhDMTA0MS41IDE0OS40OTkgOTk3LjQwOSAxNjAuMTE2IDk4MSAxODguNTEzQzk3OC4wMTQgMTkzLjY4MSA5NzkuOTAyIDE5Ni40MjQgOTg2IDE5Ni40MjRIMTE1MlYyNDcuMTE5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MDEuNSAyMjlMODE2LjUgMTk5LjVDODE2LjUgMTk5LjUgNzQ1LjAzMyAxMzEuNzMxIDczNiAxMTEuMzg0QzcyNi45NjcgOTEuMDM2OSA3NDYuNSAzIDc0Ni41IDNDNzc0LjEyMyA2Ni41Mzg5IDgwOS41MTYgODMuNDAzMyA5MDQuNjk5IDg0LjY4MDZDOTA0LjY5OSA4NC42ODA2IDkxMC44MzUgODQuNjgwNiA5ODEuNjY4IDg0LjY4MDZDMTA1Mi41IDg0LjY4MDYgMTEwOC40OCA1Ni44NDA0IDEwNzIuNzcgNTMuNjk0Mkg5MTNWM0gxMTQ5Ljc0VjU4LjM1OTRDMTE0My45NCA4MS4zMTY3IDEwNzEuNDIgOTcuOTI5MiA5NzcuNSA5OS41Qzk2Mi4xODEgOTkuNzU2MiA3NzMuMTMxIDEwNC4wNDUgNzU5IDExMS4zODRDNzQ0Ljg2OSAxMTguNzIyIDgwOS40NDkgMTE4IDgxOS41IDExOEM4ODcuNTM5IDExOCA5MjAuMjk1IDExNC41IDk4OC41IDExNC41QzEwNzEuMzcgMTE0LjUgMTIyMi41IDEyNCAxMjIyIDNDMTIzNS41MSA2Ni4xMzg5IDEyMjUuMzQgMjIwLjMzIDEyMjIuNSAyNDYuNUMxMjIyLjUgMjQ2LjUgMTIyMi4yNCAyMTMuOTIyIDEyMTMgMTc1QzExOTkgMTE2IDEwNTcgMTI2IDEwMTUuNSAxMjdDOTc0IDEyOCA5MjEuNTcgMTI4IDg5My41IDEzMkM4NjUuNDMgMTM2IDgwOS41ODggMTMzLjIwNSA4MTYuNSAxNTlDODM0LjUgMjAxIDg1NS41IDI0Ni41IDg1NS41IDI0Ni41TDgxOS41IDIzNy41TDgwMS41IDIyOVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==") left center/contain no-repeat;mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkwMCIgaGVpZ2h0PSIyNTAiIHZpZXdCb3g9IjAgMCAxOTAwIDI1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCjxnPgo8cGF0aCBkPSJNMTc0Ni41MiAwSDE3NjAuMzRDMTgzOS4yNiAwIDE5MDAgMzkuNjA3NSAxOTAwIDExMS41NTVWMTM4LjgwOEMxOTAwIDIxMS4xMTkgMTgzOS4yNiAyNTAgMTc2MC4zNCAyNTBIMTc0Ni41MkMxNjY2LjE1IDI1MCAxNjA0LjY4IDIxMS4xMTkgMTYwNC42OCAxMzguODA4VjExMS41NTVDMTYwNC42OCAzOS42MDc1IDE2NjYuMTUgMCAxNzQ2LjUyIDBaTTE3NDYuNTIgNTMuNDE1N0MxNjk3Ljc5IDUzLjQxNTcgMTY2Ny45NiA3NC4xMjc5IDE2NjcuOTYgMTEyLjI4MlYxMzcuNzE4QzE2NjcuOTYgMTc1Ljg3MiAxNjk3Ljc5IDE5Ni41ODQgMTc0Ni41MiAxOTYuNTg0SDE3NTguMTZDMTgwNi41MyAxOTYuNTg0IDE4MzYuNzIgMTc1Ljg3MiAxODM2LjcyIDEzNy43MThWMTEyLjI4MkMxODM2LjcyIDc0LjEyNzkgMTgwNi41MyA1My40MTU3IDE3NTguMTYgNTMuNDE1N0gxNzQ2LjUyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyMjIgMy4yNjk1M0gxMzIyLjc0TDEzODcuNDggMTI0LjI3MkgxNDAwLjk0TDE0NjcuMTMgMy4yNjk1M0gxNTYyLjQyVjI0Ni43MjlIMTUwMC41OVY2NS40MDYySDE0ODkuNjhMMTQyNC45NCAxODUuMzE5SDEzNTUuNDhMMTI5MS44MyA2NS40MDYySDEyODAuOTJWMjQ2LjcyOUgxMjIyVjMuMjY5NTNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNjUzLjg4MyAzLjI2OTUzSDc0Ni42MjVMNzc3LjY1MSA3Mi41TDc0MCAxMTQuNUw4MTYuNjkyIDE1OS42MTRMODU1LjczMyAyNDYuNzI5SDc5My45MDVMNzY5LjkwMSAxOTMuMzEzSDYyOC40MjRMNjA0LjQyIDI0Ni43MjlINTQ1LjUwMkw2NTMuODgzIDMuMjY5NTNaTTY5MS43MDcgNTEuNTk4TDY0OS44ODIgMTQ0Ljk4NUg3NDguNDQzTDcwNi42MTggNTEuNTk4SDY5MS43MDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjk2Ljk4NyAzLjI2OTUzSDM1OS4xNzlWMTk2LjIySDUxOS4yMDRWMjQ2LjcyOUgyOTYuOTg3VjMuMjY5NTNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMCAzLjI2OTUzSDE2Mi41NzFDMjI5Ljg1NCAzLjI2OTUzIDI1Ni43NjggMzIuMzM5MyAyNTYuNzY4IDc4Ljg1MDlWOTAuNDc4OEMyNTYuNzY4IDEzOC4wODEgMjI5LjQ5MSAxNjYuNzg3IDE2Mi41NzEgMTY2Ljc4N0g2Mi4xOTE2VjI0Ni43MjlIMFYzLjI2OTUzWk02Mi4xOTE2IDUzLjc3ODJWMTE2LjI3OEgxNTYuMzg4QzE4MC4zOTIgMTE2LjI3OCAxOTMuNDg1IDEwOS4wMTEgMTkzLjQ4NSA4OS4wMjUzVjgwLjY2NzhDMTkzLjQ4NSA2MS40MDkxIDE4MC4zOTIgNTMuNzc4MiAxNTYuMzg4IDUzLjc3ODJINjIuMTkxNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMTUyIDI0Ny4xMTlIOTExVjE3Ni40MzNDOTE5LjE1OCAxNjQuMDA3IDk0OCAxNDggOTgxIDE0My45OTlDMTAxNCAxMzkuOTk4IDEwNzYuODIgMTQyLjQyOCAxMDc2LjgyIDE0Mi40MjhDMTA0MS41IDE0OS40OTkgOTk3LjQwOSAxNjAuMTE2IDk4MSAxODguNTEzQzk3OC4wMTQgMTkzLjY4MSA5NzkuOTAyIDE5Ni40MjQgOTg2IDE5Ni40MjRIMTE1MlYyNDcuMTE5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MDEuNSAyMjlMODE2LjUgMTk5LjVDODE2LjUgMTk5LjUgNzQ1LjAzMyAxMzEuNzMxIDczNiAxMTEuMzg0QzcyNi45NjcgOTEuMDM2OSA3NDYuNSAzIDc0Ni41IDNDNzc0LjEyMyA2Ni41Mzg5IDgwOS41MTYgODMuNDAzMyA5MDQuNjk5IDg0LjY4MDZDOTA0LjY5OSA4NC42ODA2IDkxMC44MzUgODQuNjgwNiA5ODEuNjY4IDg0LjY4MDZDMTA1Mi41IDg0LjY4MDYgMTEwOC40OCA1Ni44NDA0IDEwNzIuNzcgNTMuNjk0Mkg5MTNWM0gxMTQ5Ljc0VjU4LjM1OTRDMTE0My45NCA4MS4zMTY3IDEwNzEuNDIgOTcuOTI5MiA5NzcuNSA5OS41Qzk2Mi4xODEgOTkuNzU2MiA3NzMuMTMxIDEwNC4wNDUgNzU5IDExMS4zODRDNzQ0Ljg2OSAxMTguNzIyIDgwOS40NDkgMTE4IDgxOS41IDExOEM4ODcuNTM5IDExOCA5MjAuMjk1IDExNC41IDk4OC41IDExNC41QzEwNzEuMzcgMTE0LjUgMTIyMi41IDEyNCAxMjIyIDNDMTIzNS41MSA2Ni4xMzg5IDEyMjUuMzQgMjIwLjMzIDEyMjIuNSAyNDYuNUMxMjIyLjUgMjQ2LjUgMTIyMi4yNCAyMTMuOTIyIDEyMTMgMTc1QzExOTkgMTE2IDEwNTcgMTI2IDEwMTUuNSAxMjdDOTc0IDEyOCA5MjEuNTcgMTI4IDg5My41IDEzMkM4NjUuNDMgMTM2IDgwOS41ODggMTMzLjIwNSA4MTYuNSAxNTlDODM0LjUgMjAxIDg1NS41IDI0Ni41IDg1NS41IDI0Ni41TDgxOS41IDIzNy41TDgwMS41IDIyOVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==") left center/contain no-repeat;letter-spacing:0;flex:none}
.nav .lm{height:18px;font-size:18px}
.foot-brand .lm{height:22px}
.gv-bar .lm{--logo-c:var(--ash);height:12px}
@media (max-width:767px){.nav .lm{height:15px}}
@media (max-width:380px){.nav .lm{height:14px}}

/* 56. No page-wide heat flash at the top when a crash multiplier peaks (removed on request) */
.app.flash::after{animation:none!important;opacity:0!important}

/* 57. LOBBY HERO BANNERS, new art (Figma PLAZMO Identity 82:231, 123:63, 126:172). X and dice sit on the original heat gradient;
   the tournament ball carries the designer's own vertical gradient, so its tile drops the dark overlay. */
img[src*="banners/x-heat"]{--art-pos:78% 45%}
img[src*="banners/fur-dice-2"]{--art-pos:100% 40%}
img[src*="banners/ball-2"]{--art-pos:100% 45%}
.promo .t-side:has(>img[src*="banners/ball-2"])::before{background:linear-gradient(90deg,rgba(12,12,12,.38),rgba(12,12,12,0) 62%)}


/* 58. LOBBY HERO CAROUSEL on desktop: three main slides share the 8-column hero cell and cross-fade every 6 s
   (app.js initHeroFade). On phones they are ordinary slides of the swipe track; on 768–960 only the first shows. */
@media (min-width:961px){
  .promo>.t-main{grid-column:1/span 8;grid-row:1/span 2;transition:opacity .6s var(--ease),visibility .6s}
  .promo>.t-alt:not(.is-cur),.promo:has(>.t-alt.is-cur)>.t-main:not(.t-alt){opacity:0;visibility:hidden;pointer-events:none}
  .promo>.t-main .deco i{cursor:pointer;pointer-events:auto}
}
@media (min-width:768px) and (max-width:960px){.promo>.t-alt{display:none}}
@media (prefers-reduced-motion:reduce){.promo>.t-main{transition:none}}

/* 59. No reddish glow on the page background (removed on request); the film grain stays */
.app::before{background:var(--noise)!important}

/* 60. Tournament tile art (Figma 126:154): the designer's diagonal heat gradient is baked into the image */
img[src*="banners/ball-3"]{--art-pos:100% 45%}
.promo .t-side:has(>img[src*="banners/ball-3"])::before{background:linear-gradient(90deg,rgba(12,12,12,.38),rgba(12,12,12,0) 62%)}
/* mouse swipe on the lobby hero */
@media (min-width:961px){.promo>.t-main{cursor:grab;user-select:none}.promo.dragging>.t-main{cursor:grabbing}}
.promo img{-webkit-user-drag:none}

/* 61. LOBBY RAILS SCROLL SIDEWAYS on desktop (≥961, where the row arrows show): Top 10, Crash, Slots and Live become
   one-row tracks with the same card width as the old fixed grids (Top 10: 5 visible, Crash: 3, Live: 4, Slots: 5 / 7 / 8),
   so the first screen looks unchanged and the rest scrolls in. Arrows: app.js initArrows; mouse drag: initDragRails.
   The 6 px block padding keeps the -4 px hover lift and focus ring inside the clipped track; the Top 10 track keeps
   4 px on the left for the outlined numeral (left:-4px). Phones and 768–960 keep their own lanes (sections 21, 25). */
@media (min-width:961px){
  #top10,#crash-l,#slots-l,#live-l{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:6px;margin-block:-6px}
  #top10::-webkit-scrollbar,#crash-l::-webkit-scrollbar,#slots-l::-webkit-scrollbar,#live-l::-webkit-scrollbar{display:none}
  #top10>*,#crash-l>*,#slots-l>*,#live-l>*{scroll-snap-align:start}
  #top10{grid-auto-columns:calc((100% - 48px) / 5);padding-left:4px;margin-left:-4px;scroll-padding-left:4px}
  #crash-l{grid-auto-columns:calc((100% - 24px) / 3)}
  #live-l{grid-auto-columns:calc((100% - 36px) / 4)}
  #slots-l{grid-auto-columns:calc((100% - 48px) / 5)}
  #slots-l>:nth-child(n){display:grid}
  [data-drag].is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
  [data-drag].is-drag a{cursor:grabbing}
  [data-drag] img{-webkit-user-drag:none}
}
@media (min-width:1181px) and (max-width:1279px){#slots-l{grid-auto-columns:calc((100% - 72px) / 7)}}
@media (min-width:1280px){#slots-l{grid-auto-columns:calc((100% - 84px) / 8)}}
/* 768–960: Crash stays a stacked list of the first three rows, as before */
@media (min-width:768px) and (max-width:960px){#crash-l>:nth-child(n+4){display:none}}

/* 62. Tournaments featured banner art (Figma 133:299): wide strip, ball on the right; drop the darkening veil so the designer's gradient shows */
img[src*="banners/ball-strip"]{--art-pos:100% 50%}
.tn-feat:has(>img[src*="banners/ball-strip"])::before{background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)!important}
img[src*="banners/zeus-temple"]{--art-pos:80% 40%}
img[src*="banners/chips-lava"]{--art-pos:90% 40%}

/* 63. Category / catalog header art: show the whole object at the right instead of a cropped close-up (requested) */
@media (min-width:768px){
  .bn.head>img[src*="img/banners/"]{left:auto!important;right:0!important;width:auto!important;height:100%!important;aspect-ratio:1586/800!important;object-fit:cover!important;object-position:center!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 35%)!important}
}
@media (min-width:768px){
  .bn.head>img[src*="img/banners/"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 25%,#000 60%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 25%,#000 60%)!important}
  .bn.head>img[src*="banners/zeus-temple"]{height:165%!important;top:-38%!important;bottom:auto!important;right:-4%!important}
}
@media (min-width:768px){
  .bn.head>img[src*="img/banners/"]{height:150%!important;top:-25%!important;bottom:auto!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 20%,rgba(0,0,0,.65) 42%,#000 68%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 20%,rgba(0,0,0,.65) 42%,#000 68%)!important}
  .bn.head>img[src*="banners/zeus-temple"]{height:165%!important;top:-38%!important}
  .bn.head>img[src*="banners/chips-lava"]{height:170%!important;top:-35%!important;right:-6%!important}
}
@media (min-width:768px){
  .bn.head>img[src*="img/banners/"]{height:175%!important;top:-37%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 22%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.8) 62%,#000 82%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 22%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.8) 62%,#000 82%)!important}
  .bn.head>img[src*="banners/zeus-temple"]{height:175%!important;top:-42%!important}
  .bn.head>img[src*="banners/chips-lava"]{height:180%!important;top:-40%!important}
}
@media (min-width:768px){
  .bn.head>img[src*="img/banners/"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%)!important}
  .bn.head>img[src*="banners/lighter"]{height:210%!important;top:-58%!important;right:-4%!important}
}
@media (min-width:768px){.bn.head>img[src*="banners/lighter"]{height:150%!important;top:-22%!important;right:2%!important}}
@media (min-width:768px){.bn.head>img[src*="banners/zeus-temple"]{height:215%!important;top:-48%!important;right:-22%!important}}
@media (min-width:768px){.bn.head>img[src*="banners/chips-lava"]{height:150%!important;top:-25%!important;right:7%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%,#000 88%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%,#000 88%,transparent 100%)!important}}
@media (min-width:768px){.bn.head>img[src*="banners/zeus-temple"]{height:190%!important;top:-40%!important;right:6%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%,#000 90%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%,#000 90%,transparent 100%)!important}}

/* 64. Providers header art (Figma 149:114): plasma splash on the right, fading into the plate */
.pvp-art{position:absolute;z-index:-1;right:8%;top:50%;translate:0 -50%;height:170%;width:auto;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media (max-width:767px){.pvp-art{right:-30%;height:130%;opacity:.7}}
@media (min-width:768px){.bn.head>img[src*="banners/chips-lava"]{right:0!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%)!important}}
.pvp-art{mix-blend-mode:lighten}
@media (min-width:768px){.bn.head>img[src*="banners/zeus-temple"]{height:225%!important;top:-58%!important;right:4%!important}}
@media (min-width:768px){.bn.head>img[src*="banners/lighter"]{height:185%!important;top:-38%!important;right:2%!important}}
@media (min-width:768px){.bn.head>img[src*="banners/lighter"]{top:-18%!important;right:-3%!important}}

/* 65. Providers header art: larger, opaque, above the outlined count */
@media (min-width:768px){.pvp-art{z-index:0;mix-blend-mode:normal;right:6%;height:230%;top:46%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.pvp-hd>.pvp-t{position:relative;z-index:1}}

/* 66. Phones: header art returns as a quiet accent on the right edge, under the text */
@media (max-width:767px){
  .cp .bn.head>img[src*="img/banners/"]{display:block!important;position:absolute!important;z-index:-1!important;inset:auto!important;top:50%!important;right:0!important;left:auto!important;translate:0 -50%!important;width:auto!important;height:150%!important;aspect-ratio:1586/800!important;object-fit:cover!important;object-position:right center!important;opacity:.9!important;mix-blend-mode:normal!important;animation:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,rgba(0,0,0,.5) 55%,#000 75%)!important;mask-image:linear-gradient(90deg,transparent 0,transparent 30%,rgba(0,0,0,.5) 55%,#000 75%)!important}
  .cp .bn.head .bn-t{position:relative;z-index:1}
  .pvp-art{z-index:0;mix-blend-mode:normal;opacity:.9;right:-22%;height:190%;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
  .pvp-hd>.pvp-t{position:relative;z-index:1}
}
@media (min-width:768px){.bn.head>img[src*="banners/lighter"]{height:200%!important;top:-24%!important;right:0!important;translate:40% 0!important}}

/* 67. Providers header art like the category headers: big, flush right, left-only fade, outlined count above */
@media (min-width:768px){
  .pvp-hd>.pvp-art{z-index:-2;mix-blend-mode:normal;opacity:1;left:auto;right:0;top:50%;translate:0 -50%;height:250%;width:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 12%,rgba(0,0,0,.7) 26%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 12%,rgba(0,0,0,.7) 26%,#000 40%)}
  .pvp-hd>.pvp-num{z-index:-1}
}
@media (min-width:768px){.bn.head>img[src*="banners/zeus-temple"]{right:0!important;translate:7% 0!important}}
@media (min-width:768px){.pvp-hd>.pvp-art{height:500%;translate:30% -50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 15%,rgba(0,0,0,.6) 28%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,transparent 15%,rgba(0,0,0,.6) 28%,#000 38%)}}
@media (min-width:768px){.pvp-hd>.pvp-art{translate:30% -32%}.pvp-hd>.pvp-num{right:calc(clamp(24px,7%,110px) + 170px)}}

/* 68. Providers header uses the Slots art (chips-lava) with the same placement as the category headers */
.pvp-hd>.pvp-art[src*="chips-lava"]{z-index:-2;opacity:1;mix-blend-mode:normal;left:auto;right:0;top:-40%;translate:none;height:180%;width:auto;aspect-ratio:1586/800;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 36%)}
@media (max-width:767px){.pvp-hd>.pvp-art[src*="chips-lava"]{top:50%;translate:0 -50%;height:150%;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,rgba(0,0,0,.5) 55%,#000 75%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,rgba(0,0,0,.5) 55%,#000 75%)}}
@media (max-width:767px){.pvp-hd>.pvp-art[src*="chips-lava"]{right:0;height:125%;translate:22% -50%;opacity:.85}}

/* 69. Active bonus card: art strip across the top of the panel (money gun right, fading left), larger title */
.bnp .bact>.panel{overflow:hidden}
.bnp .bact-h{position:relative;isolation:isolate;margin:-24px -24px 4px;padding:28px 28px 26px;min-height:176px;align-items:flex-end;background:radial-gradient(60% 140% at 100% 100%,rgba(142,21,4,.45),transparent 65%),var(--char);border-bottom:1px solid var(--line)}
.bnp .bact-bg{position:absolute;z-index:-1;top:0;right:0;height:100%;width:auto;max-width:70%;aspect-ratio:800/520;object-fit:cover;object-position:right 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,#000 45%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 18%,#000 45%)}
.bnp .bact-ht{display:grid;gap:10px;justify-items:start;max-width:60%}
.bnp .bact-ht .eyebrow{color:var(--ash)}
.bnp .bact-h h3{font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.02em}
.bnp .bact-h .cluster{margin-top:2px;align-items:center}
@media (max-width:767px){
  .bnp .bact-h{margin:-18px -18px 2px;padding:18px;min-height:150px}
  .bnp .bact-bg{max-width:none;height:100%;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 20%,rgba(0,0,0,.5) 45%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,transparent 20%,rgba(0,0,0,.5) 45%,#000 70%)}
  .bnp .bact-ht{max-width:78%}
  .bnp .bact-h h3{font-size:22px}
}

/* 70. Promotions: tournament card on the square ball art (Figma 133:312): eyebrow top, prize and CTA bottom */
img[src*="banners/ball-sq"]{--art-pos:100% 20%}
.bn.hero.pr-tour.tq{justify-content:flex-end;gap:14px;padding:26px 28px;min-height:300px}
.bn.hero.pr-tour.tq>img{opacity:1}
.pr-tour.tq::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.18) 48%,transparent 70%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 60%)}
.pr-tour.tq .tq-k{position:absolute;top:26px;left:28px;display:inline-flex;align-items:center}
.pr-tour.tq .bn-v{font-size:clamp(40px,3.6vw,56px)}
.pr-tour.tq .bn-v small{margin-top:10px;font-size:12px}
.tq-f{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.pr-tour.tq .bn-cta{margin:0}
.tq-n{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(243,240,235,.75)}
@media (max-width:767px){
  .bn.hero.pr-tour.tq{display:flex;min-height:300px;padding:18px 20px 20px;gap:12px}
  .pr-tour.tq .tq-k{top:18px;left:20px}
  .pr-tour.tq .bn-v{font-size:40px}
  .pr-tour.tq .bn-v small{display:block;font-size:11px}
  .pr-tour.tq .bn-cta{height:44px}
  .bn.hero.pr-tour.tq>img{opacity:1;height:100%;right:0}
}
.bn.hero.pr-tour.tq{background:radial-gradient(80% 70% at 100% 100%,rgba(255,153,0,.55),rgba(142,21,4,.4) 45%,transparent 75%),#000}
.bn.hero.pr-tour.tq>img[src*="img/banners/"]{inset:auto!important;top:-18%!important;right:-16%!important;left:auto!important;bottom:auto!important;width:auto!important;height:118%!important;aspect-ratio:1!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 30%)!important}
.pr-tour.tq::before{background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 45%)}
@media (max-width:767px){.bn.hero.pr-tour.tq>img[src*="img/banners/"]{height:105%!important;top:-14%!important;right:-20%!important}}

/* 71. Welcome pack card: big offer line, then the three deposits as one glass strip with a heat line and rising colour */
.ofb .wh .bn-h.wh-h{font-size:clamp(28px,3vw,44px);line-height:.95;max-width:none;color:var(--core);text-shadow:0 0 22px rgba(255,197,107,.35)}
.wh-sub{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(243,240,235,.8)}
.wh-s.wh2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(100%,560px);position:relative;border-radius:var(--r-m);background:rgba(10,10,10,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(243,240,235,.1)}
.wh-s.wh2::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ember),var(--flare) 55%,var(--core))}
.wh-s.wh2 li,.wh-s.wh2 li:nth-child(2),.wh-s.wh2 li.pk{min-height:0;padding:20px 18px 16px;gap:6px;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;position:relative}
.wh-s.wh2 li+li{border-left:1px solid rgba(243,240,235,.1)}
.wh-s.wh2 li::before{content:"";position:absolute;top:-4px;left:18px;width:10px;height:10px;border-radius:50%;background:var(--sc);box-shadow:0 0 10px var(--sc)}
.wh-s.wh2 b,.wh-s.wh2 li:nth-child(2) b{font-size:clamp(24px,2.3vw,34px);-webkit-text-stroke:0;color:rgba(243,240,235,.88);text-shadow:none}
.wh-s.wh2 li:nth-child(2) b{color:var(--flare-hi)}
.wh-s.wh2 li.pk b{color:var(--core);text-shadow:0 0 18px rgba(255,197,107,.55)}
@media (max-width:767px){
  .ofb .wh .bn-h.wh-h{font-size:26px}
  .wh-sub{font-size:11px}
  .wh-s.wh2 li,.wh-s.wh2 li:nth-child(2),.wh-s.wh2 li.pk{padding:16px 10px 12px}
  .wh-s.wh2 li::before{left:10px;width:8px;height:8px;top:-3px}
  .wh-s.wh2 b,.wh-s.wh2 li:nth-child(2) b,.wh-s.wh2 li.pk b{font-size:20px}
}

/* 72. Jackpots: the states of matter are real renders now (Figma 131:190): object top-right, soft round fade into the card */
.ofb .jp-states .jp{isolation:isolate;overflow:hidden}
.jp-art{position:absolute;z-index:-1;pointer-events:none;top:-6%;right:-8%;width:78%;aspect-ratio:1;height:auto;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);transition:scale .6s var(--ease)}
.ofb a.jp:hover .jp-art{scale:1.05}
.jp-mega .jp-art{width:auto;height:118%;top:-12%;right:-4%}
.ofb .jp-states .jp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--char) 18%,rgba(27,27,27,.7) 42%,transparent 70%)}
.ofb .jp-states .jp-mega::before{background:linear-gradient(90deg,var(--char) 20%,rgba(27,27,27,.6) 45%,transparent 70%)}
.ofb .jp-states .jp-mini,.ofb .jp-states .jp-major,.ofb .jp-states .jp-mega{background:#0b0b0b}
@media (max-width:767px){
  .jp-art{width:90%;top:-10%;right:-14%}
  .jp-mega .jp-art{height:110%;top:-8%;right:-10%}
}

/* 73. VIP levels: five cards, each a hotter state of matter (Figma 131:190 renders); reached = lit, locked = dimmed */
.vl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative}
.vl-c{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r-l);overflow:hidden;background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.vl-c::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:var(--line)}
.vl-c.is-done::before,.vl-c.is-now::before{background:linear-gradient(90deg,var(--ember),var(--flare))}
.vl-c.is-next::before{background:linear-gradient(90deg,var(--flare) 38%,var(--line) 38%)}
.vl-art{position:relative;display:block;aspect-ratio:1/.82;overflow:hidden;background:#000}
.vl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:scale .6s var(--ease),filter .3s}
.vl-c[data-lv="core"] .vl-art img{object-position:78% 50%;scale:1.25}
.vl-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--char) 0,transparent 45%)}
.vl-c.is-lock .vl-art img{filter:grayscale(.55) brightness(.55)}
.vl-c:hover .vl-art img{scale:1.05}
.vl-c[data-lv="core"]:hover .vl-art img{scale:1.3}
.vl-b{display:grid;align-content:start;gap:6px;padding:4px 18px 18px;margin-top:-18px;position:relative;z-index:1}
.vl-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.vl-b h3{font-size:22px;line-height:1}
.vl-sum{display:grid;gap:2px;margin-top:4px}
.vl-sum b{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--bone)}
.vl-sum small{font-family:var(--mono);font-size:11px;color:var(--ash)}
.vl-st{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ash)}
.vl-c.is-done .vl-st{color:var(--ok)}
.vl-you{justify-self:start;height:28px;padding:0 12px;border-radius:var(--r-pill);color:var(--flare-hi);box-shadow:inset 0 0 0 1px var(--flare)}
.vl-c.is-next .vl-st{display:grid;gap:6px;width:100%}
.vl-c.is-next .vl-st b{color:var(--bone)}
.vl-c.is-now{box-shadow:inset 0 0 0 1px rgba(255,153,0,.55),0 0 40px -12px rgba(255,153,0,.45)}
.vl-c.is-now .vl-k{color:var(--flare-hi)}
.vl-c.is-top h3{color:var(--flare-hi)}
@media (max-width:1100px){.vl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .vl{grid-template-columns:minmax(0,1fr);gap:8px}
  .vl-c{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto;border-radius:22px}
  .vl-art{aspect-ratio:auto;height:100%;min-height:128px}
  .vl-art::after{background:linear-gradient(270deg,var(--char) 0,transparent 50%)}
  .vl-b{margin:0;padding:14px 16px 14px 6px;gap:4px}
  .vl-b h3{font-size:18px}
  .vl-st{margin-top:6px}
}
.vl-c[data-lv="core"] .vl-art img{object-position:50% 50%;scale:1}.vl-c[data-lv="core"]:hover .vl-art img{scale:1.05}
img[src*="banners/gun-heat"]{--art-pos:100% 40%}

/* 74. VIP level-up: the next level's render (Flare = gas) instead of the CSS orb */
.vp-orb.vp-orb-art{background:none!important;box-shadow:none!important;animation:none!important;width:220px;height:220px;border-radius:0;overflow:visible}
.vp-orb.vp-orb-art::before,.vp-orb.vp-orb-art::after{display:none!important}
.vp-orb-art img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
@media (max-width:767px){.vp-orb.vp-orb-art{width:110px;height:110px}}

/* 75. VIP weekly cashback: money gun on the right, the rates as one glass panel of even heat bars */
.ofb .vp-cb2.vp-cb3{align-items:center;gap:24px 40px;min-height:260px;padding:32px 40px;background:#000}
.ofb .vp-cb3.bn.hero>img[src*="img/banners/"]{left:auto!important;right:0!important;width:62%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 22%,#000 45%)!important}
.ofb .vp-cb3 .bn-t{flex:0 1 360px}
.ofb .vp-cb3 .bn-h{font-size:clamp(24px,2.4vw,34px);line-height:1}
.vp-cb3 .cb-bars{height:auto;align-items:flex-end;gap:8px;padding:18px 20px 14px;border-radius:var(--r-m);background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(243,240,235,.1)}
.vp-cb3 .cb-bars li{width:52px;height:130px}
.vp-cb3 .cb-bars li i{width:100%;height:calc(var(--h) * .7);border-radius:6px;background:linear-gradient(180deg,rgba(243,240,235,.28),rgba(243,240,235,.08));box-shadow:none}
.vp-cb3 .cb-bars [data-lv="ember"] i{background:linear-gradient(180deg,var(--ember),rgba(142,21,4,.35))}
.vp-cb3 .cb-bars [data-lv="flare"] i{background:linear-gradient(180deg,var(--flare),rgba(255,153,0,.3))}
.vp-cb3 .cb-bars [data-lv="core"] i{background:linear-gradient(180deg,var(--flare-hi),rgba(255,173,51,.35))}
.vp-cb3 .cb-bars [data-lv="plasma"] i{background:linear-gradient(180deg,var(--core),var(--flare));box-shadow:0 0 18px rgba(255,197,107,.5)}
.vp-cb3 .cb-bars li b{font-size:14px;color:var(--bone)}
.vp-cb3 .cb-bars [data-lv="plasma"] b{color:var(--core)}
@media (max-width:767px){
  .ofb .vp-cb2.vp-cb3{padding:20px;min-height:0}
  .ofb .vp-cb3.bn.hero>img[src*="img/banners/"]{width:100%!important;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 60%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 60%,transparent 100%)!important}
  .vp-cb3 .cb-bars{padding:14px 12px 10px}
  .vp-cb3 .cb-bars li{width:auto;height:110px}
}

/* 76. VIP progress hero: a quiet macro crop of the flame (Figma 149:115) peeking in from the right edge */
.vp-hero:has(>.vp-hero-art){position:relative;isolation:isolate;overflow:hidden}
.vp-hero-art{position:absolute;z-index:-1;pointer-events:none;top:50%;right:-6%;translate:0 -50%;height:120%;width:auto;aspect-ratio:2;object-fit:cover;opacity:.42;-webkit-mask-image:radial-gradient(60% 75% at 70% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 75% at 70% 50%,#000 30%,transparent 100%)}
@media (max-width:767px){.vp-hero-art{height:70%;top:0;translate:0 0;right:-30%;opacity:.3}}

/* 77. Deposit dialog bonus: the money gun stays on the right and only partly shows */
#wl-bn.bn>img[src*="img/banners/"]{left:auto!important;right:-6%!important;top:-10%!important;bottom:auto!important;width:auto!important;height:125%!important;aspect-ratio:1586/800!important;object-position:60% 50%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 25%,#000 50%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 25%,#000 50%)!important}
#wl-bn.bn{background:radial-gradient(70% 120% at 100% 100%,rgba(142,21,4,.5),transparent 65%),#0b0b0b}
#wl-bn .wl-sw{position:relative;z-index:1;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vp-orb-art img{mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}.vp-orb.vp-orb-art{isolation:auto}

/* 78. About, "The idea": the four states are the same renders as the VIP levels (Figma 131:190) */
.ab-states>li{position:relative;isolation:isolate;overflow:hidden}
.ab-st-art{display:block;position:relative;height:150px;margin:-8px -8px 4px;pointer-events:none}
.ab-st-art img{position:absolute;left:50%;top:50%;translate:-50% -50%;height:190px;width:190px;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);transition:scale .6s var(--ease)}
.ab-states>li:hover .ab-st-art img{scale:1.06}
@media (max-width:767px){.ab-st-art{height:120px}.ab-st-art img{width:150px;height:150px}}

/* 79. About, fast payouts: no blurry blob; a clean dark panel with a thin heat line on top */
.ab-key::before{display:none}
.ab-key{background:var(--char);box-shadow:inset 0 0 0 1px var(--line)}
.ab-key::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ember),var(--flare) 50%,var(--core))}
.ph.hero.vp-hero::before{display:none}.ph.hero.vp-hero{background:#121212;box-shadow:inset 0 0 0 1px var(--line)}

/* 80. In-grid reload strip: the money gun reads as an object on the right, not a cropped slice */
.bn.in-grid>img[src*="banners/gun-heat"]{inset:auto!important;left:auto!important;bottom:auto!important;right:12%!important;top:50%!important;translate:0 -50%!important;width:auto!important;height:240%!important;aspect-ratio:1586/800!important;object-fit:cover!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 25%,#000 45%,#000 85%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 25%,#000 45%,#000 85%,transparent 100%)!important}
.bn.in-grid:has(>img[src*="banners/gun-heat"]){background:radial-gradient(40% 160% at 75% 50%,rgba(142,21,4,.45),transparent 70%),#0b0b0b}
@media (max-width:767px){.bn.in-grid>img[src*="banners/gun-heat"]{right:-20%!important;height:160%!important;opacity:.7}}
/* in-grid Zeus / cashback strips: art on the right edge only, fading into black on the left */
.bn.in-grid>img:is([src*="banners/ribbon-glow"],[src*="banners/liquid-flow"]){inset:0 0 0 auto!important;left:auto!important;right:0!important;width:52%!important;height:100%!important;object-fit:cover!important;object-position:60% 50%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%)!important}
.bn.in-grid:has(>img:is([src*="banners/ribbon-glow"],[src*="banners/liquid-flow"])){background:#0b0b0b}
@media (max-width:767px){.bn.in-grid>img:is([src*="banners/ribbon-glow"],[src*="banners/liquid-flow"]){width:75%!important;opacity:.75}}
.bn.strip>img[src*="banners/gun-heat"]{inset:auto!important;left:auto!important;bottom:auto!important;right:14%!important;top:50%!important;translate:0 -50%!important;width:auto!important;height:230%!important;aspect-ratio:1586/800!important;object-fit:cover!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 25%,#000 45%,#000 85%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 25%,#000 45%,#000 85%,transparent 100%)!important}
.bn.strip:has(>img[src*="banners/gun-heat"]){background:radial-gradient(40% 160% at 72% 50%,rgba(142,21,4,.45),transparent 70%),#0b0b0b}
@media (max-width:767px){.bn.strip>img[src*="banners/gun-heat"]{right:-25%!important;height:150%!important;opacity:.6}}
.wins[data-drag]{cursor:grab;scroll-behavior:auto}.wins[data-drag].is-drag{cursor:grabbing;user-select:none}.wins[data-drag].is-drag .win{pointer-events:none}
img[src*="banners/football"]{--art-pos:85% 30%}

/* 81. Lobby football slide (Figma 230:261): the whole composition (portrait, name, club, signature) on the right, never cropped */
@media (min-width:768px){
  .promo>.t-main:has(>img[src*="banners/football"]){background:#000}
  .promo>.t-main>img[src*="banners/football"]{inset:0 0 0 auto!important;left:auto!important;right:0!important;top:0!important;width:auto!important;height:100%!important;aspect-ratio:1586/800!important;object-fit:cover!important;object-position:100% 50%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 30%)!important}
  .promo>.t-main:has(>img[src*="banners/football"])::before{background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 45%)!important}
}
@media (min-width:768px){.promo>.t-main>img[src*="banners/football"]{top:auto!important;bottom:0!important;height:116%!important}}

/* 82. Lobby football slide, layered (Figma 230:261): portrait on the brand gradient + live labels + signature.
   All three sit in one box (.fb-art) sized by the tile height, so they scale together and never collide with the copy. */
.t-main.t-fb{background:#000}
.t-fb .fb-art{position:absolute;z-index:-1;right:0;bottom:0;height:94%;aspect-ratio:950/800;container-type:size;pointer-events:none}
.t-fb .fb-p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.t-fb .fb-l{position:absolute;font-family:var(--mono);font-size:2.6cqh;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:rgba(240,238,234,.55);white-space:nowrap}
.t-fb .fb-name{left:80%;top:19%}
.t-fb .fb-club{left:24%;top:62%}
.t-fb .fb-sign{position:absolute;left:70%;top:64%;width:22%;height:auto;opacity:.6}
.t-fb>:is(.eyebrow,.t-h,p,.cta){max-width:52%}
.t-fb::before{background:none!important}
@media (max-width:767px){
  .t-fb .fb-art{height:100%;right:-8%}
  .t-fb>:is(.eyebrow,.t-h,p){max-width:58%}
}
.t-fb .fb-p{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 18%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 18%,#000 38%)}
@media (max-width:767px){.t-fb .fb-art{right:0;height:90%}.t-fb .fb-l{font-size:3.2cqh}}
/* football slide, bigger and off the edge: the portrait overflows the bottom (shirt), the head keeps air on top */
@media (min-width:768px){
  .t-fb .fb-art{height:114%;top:7%;bottom:auto;right:5%}
  .t-fb .fb-p{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 34%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 34%,#000 88%,transparent 100%)}
  .t-fb .fb-sign{top:53%;left:67%}
  .t-fb .fb-name{left:76%;top:17%}
  .t-fb .fb-club{top:56%}
}
@media (min-width:768px){.t-fb .fb-sign{top:56%;left:75%;width:20%}}
@media (min-width:768px){.t-fb .fb-art{height:110%;top:4%}.t-fb .fb-sign{top:68%;left:70%;width:19%}.t-fb .fb-club{top:60%}}
@media (max-width:767px){.t-fb .fb-art{height:104%;top:4%;bottom:auto;right:0}.t-fb .fb-sign{top:68%;left:70%;width:19%;opacity:.55}.t-fb .fb-name{left:76%;top:17%}.t-fb .fb-club{top:60%}.t-fb .fb-p{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 34%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 34%)}}
.t-fb .fb-art>.fb-sign{inset:auto!important;right:auto!important;bottom:auto!important;top:68%!important;left:70%!important;width:19%!important;height:auto!important;aspect-ratio:394/356!important;object-fit:contain!important;translate:none!important;scale:none!important;max-width:none!important}
.t-fb .fb-art>.fb-p{inset:0!important;width:100%!important;height:100%!important;translate:none!important;max-width:none!important}
/* football slide: larger portrait, name moved off the hair, signature on the right shoulder */
.t-fb .fb-art{height:122%!important;top:3%!important;bottom:auto!important}
.t-fb .fb-name{left:85%!important;top:14%!important}
.t-fb .fb-art>.fb-sign{top:59%!important;left:79%!important;width:17%!important}
@media (max-width:767px){.t-fb .fb-art{height:116%!important;top:3%!important;right:-4%!important}}
@media (max-width:767px){.t-fb .fb-art{right:0!important}.t-fb .fb-name{left:80%!important}}
/* game badges use backdrop-filter, which can escape the card radius clip: the badge takes the card corner itself */
.gc>.gt{border-top-left-radius:inherit}

/* 83. Lobby slider: looping videos over the banner art (same framing as the still, which stays underneath as the poster) */
.tile>.tile-vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--art-pos,100% 50%);pointer-events:none}
.t-main>.tile-vid{inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}
.tile>img[src*="banners/x-heat"]~.tile-vid{--art-pos:78% 45%}
.tile>img[src*="banners/zeus-temple"]~.tile-vid{--art-pos:80% 40%}
.tile>img[src*="banners/ball-3"]~.tile-vid{--art-pos:100% 45%}
@media (prefers-reduced-motion:reduce){.tile>.tile-vid{display:none}}
.tile>img[src*="banners/chips-lava"]~.tile-vid{--art-pos:90% 40%}

/* =====================================================================
   84. HEAT EFFECTS (assets/js/fx.js). Heat shows where the moment is hot, never everywhere.
   ===================================================================== */
@property --fa{syntax:'<angle>';inherits:false;initial-value:0deg}
/* 1. fire button: a flame runs around the edge, a glow breathes under it; hover makes it burn brighter */
.btn.fire{position:relative;isolation:isolate;overflow:visible}
.btn.fire::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--fa),transparent 0 52%,rgba(142,21,4,.0) 54%,var(--ember) 64%,var(--flare) 78%,var(--core) 86%,var(--flare) 90%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:pzFireRun 2.6s linear infinite}
.btn.fire::after{content:"";position:absolute;left:12%;right:12%;bottom:-10px;height:22px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,153,0,.55),rgba(142,21,4,.35) 60%,transparent);filter:blur(6px);animation:pzFireBreath 1.8s ease-in-out infinite alternate}
.btn.fire:hover::before{filter:drop-shadow(0 0 6px rgba(255,173,51,1)) brightness(1.25)} /* brighter, never faster: changing the duration restarts the run */
.btn.fire:hover::after{opacity:1;filter:blur(8px) brightness(1.3)}
.btn.fire.sm::after,.nav .btn.fire::after{bottom:-8px;height:16px}
@keyframes pzFireRun{to{--fa:360deg}}
@keyframes pzFireBreath{0%{opacity:.55;transform:scaleX(.9)}60%{opacity:.9;transform:scaleX(1.05)}100%{opacity:.7;transform:scaleX(.95) translateY(-1px)}}

/* 2. Core flash: one soft white-gold bloom from where the peak happened, plus sparks; the peak element glows */
.core-flash{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(420px circle at var(--x) var(--y),rgba(255,241,214,.55),rgba(255,173,51,.25) 35%,rgba(142,21,4,.08) 60%,transparent 75%);animation:pzCore 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.core-flash i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--core);box-shadow:0 0 8px 2px rgba(255,173,51,.9);opacity:0;animation:pzSpark .9s cubic-bezier(.15,.6,.3,1) var(--dl) forwards}
@keyframes pzCore{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes pzSpark{0%{opacity:1;transform:translate(0,0) scale(var(--s))}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.core-hot{animation:pzCoreText 1.4s ease-out}
.toast.peak.core-hot{box-shadow:0 0 0 1px rgba(255,241,214,.5),0 0 40px -6px rgba(255,173,51,.7)}
@keyframes pzCoreText{0%{text-shadow:0 0 0 transparent}20%{text-shadow:0 0 18px rgba(255,241,214,.95),0 0 36px rgba(255,153,0,.7);color:var(--core)}100%{text-shadow:0 0 0 transparent}}

/* 3. jackpots: heat haze over the renders, counters glow on every tick and warm with the pressure (--press 0–100) */
.jp .jp-art{filter:url(#pz-haze)}
.ofb .jp-states .jp .jp-v{color:color-mix(in oklab,var(--bone),var(--flare-hi) calc(var(--press,0) * .55%))}
.jp-v.jp-tick,[data-jp].jp-tick{animation:pzTick .6s ease-out}
@keyframes pzTick{0%{text-shadow:0 0 14px rgba(255,173,51,.85)}100%{text-shadow:0 0 0 rgba(255,173,51,0)}}
.ofb .jp-states .jp-mega .jp-v{animation:pzSimmer 2.4s ease-in-out infinite alternate}
@keyframes pzSimmer{from{text-shadow:0 0 14px rgba(255,197,107,.35)}to{text-shadow:0 0 26px rgba(255,197,107,.7),0 0 4px rgba(255,241,214,.6)}}
.jp-mega .jp-ember{position:absolute;bottom:-6px;left:var(--x);width:3px;height:3px;border-radius:50%;z-index:0;pointer-events:none;background:var(--flare-hi);box-shadow:0 0 6px 1px rgba(255,153,0,.8);animation:pzEmber var(--d) linear var(--dl) infinite}
@keyframes pzEmber{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(12px,-260px);opacity:0}}

@media (max-width:767px){.jp .jp-art{filter:none}.btn.fire::after{bottom:-6px}}
@media (prefers-reduced-motion:reduce){.btn.fire::before,.btn.fire::after,.jp-mega .jp-ember,.ofb .jp-states .jp-mega .jp-v{animation:none}.jp .jp-art{filter:none}.core-flash{display:none}}
/* fire button, stronger: a wider flame on the edge, a breathing halo and tongues licking up from the bottom edge */
.btn.fire{animation:pzHalo 1.9s ease-in-out infinite alternate}
.btn.fire::before{inset:-3px;padding:3px;filter:drop-shadow(0 0 4px rgba(255,153,0,.9));
  background:conic-gradient(from var(--fa),transparent 0 40%,var(--ember) 52%,var(--flare) 66%,var(--core) 76%,var(--flare-hi) 82%,var(--ember) 92%,transparent 100%)}
.btn.fire::after{left:6%;right:6%;bottom:-14px;height:30px;background:radial-gradient(60% 100% at 50% 0%,rgba(255,173,51,.85),rgba(255,153,0,.45) 40%,rgba(142,21,4,.3) 70%,transparent);filter:blur(7px)}
@keyframes pzHalo{0%{box-shadow:0 0 14px -2px rgba(255,153,0,.35),0 0 0 0 rgba(142,21,4,0)}100%{box-shadow:0 0 26px 2px rgba(255,153,0,.55),0 0 46px 6px rgba(142,21,4,.35)}}
@media (prefers-reduced-motion:reduce){.btn.fire{animation:none;box-shadow:0 0 18px rgba(255,153,0,.4)}}
.jp:not(.jp-mega) .jp-v[data-jp]{color:color-mix(in oklab,var(--bone),var(--flare-hi) calc(var(--press,0) * .5%))!important}
/* fire button hover: keep the halo and the flame running exactly as they are, only brighter */
.btn.fire::before,.btn.fire::after{transition:filter .25s,opacity .25s}
.btn.fire:hover{animation-play-state:running}
.btn.fire:hover::after{opacity:1;filter:blur(7px) brightness(1.35)}
.btn.fire:active{transform:none}
/* the header Deposit has a bigger touch area on ::after in some layouts: the glow wins there */
.nav .wallet .btn.fire.dep::after,.nav .btn.fire.gst-up::after{inset:auto;left:6%;right:6%;top:auto;bottom:-12px;height:24px}

/* 85. Living art: every banner render without its own video breathes slowly (scale only, so it never fights the
   per-image translate/transform geometry). The lobby slides and the headers with a video (fx.js .art-vid) are skipped. */
:is(.bn.head,.bn.in-grid,.bn.strip,.of-art,.tn-feat,.pr-tour,.bact-h,.pvp-hd,.vp-cb3,.bn.hero)>img:not(:has(+ .tile-vid, + .art-vid)),
.vl-art img,.ab-st-art img,.vp-orb-art img,.lg-b img{animation:pzBreath 16s ease-in-out infinite alternate;transform-origin:70% 50%}
.vl-art img,.ab-st-art img,.vp-orb-art img{transform-origin:50% 50%;animation-duration:11s}
.promo .tile>img{animation:none}
@keyframes pzBreath{0%{scale:1}100%{scale:1.06}}
.vl-c:hover .vl-art img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){:is(.bn.head,.bn.in-grid,.bn.strip,.of-art,.tn-feat,.pr-tour,.bact-h,.pvp-hd,.vp-cb3,.bn.hero)>img,.vl-art img,.ab-st-art img,.vp-orb-art img,.lg-b img{animation:none}}