@charset "UTF-8";
:root {
--bg: #0D0E12; 
--bg-2: #111319; 
--panel: #171A21; 
--panel-2: #1D212A; 
--line: #262B35; 
--line-strong: #39414F;
--ink: #F2F3F5; 
--ink-2: #9AA3B2; 
--ink-3: #6B7484; 
--ink-off: #838B99;
--r: #FF3D5A; 
--o: #FFB000; 
--g: #34D399; 
--b: #22B8F0; 
--v: #7C5CFF; 
--v-2: #9B84FF;
--spectrum: linear-gradient(90deg, var(--v), var(--b), var(--g), var(--o), var(--r));
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-pill: 999px;
--maxw: 1440px;
--gutter: 64px;
--header-h: 84px;
--beam-h: 1180px;
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
--font-display: "Funnel Display", "Funnel Display Fallback", Arial, sans-serif;
--font-text: "Funnel Sans", "Funnel Sans Fallback", Arial, sans-serif;
--fs-h1: clamp(2.5rem, 1.60rem + 3.60vw, 4rem); 
--fs-h2: clamp(1.5rem, 1.28rem + 0.90vw, 1.875rem); 
--fs-h3: 1.25rem; 
--fs-lead: clamp(1.0625rem, 1.00rem + 0.30vw, 1.1875rem); 
--fs-body: 1rem; 
--fs-sm: 0.875rem; 
--fs-xs: 0.8125rem; 
--fs-label: 0.75rem;
--shadow-1: 0 1px 2px rgba(0,0,0,.5);
--shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 18px 34px -22px rgba(0,0,0,.85);
--shadow-3: 0 4px 8px rgba(0,0,0,.45), 0 30px 60px -30px rgba(0,0,0,.95);
--bloom: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(6,3,20,.55), 0 10px 22px -12px rgba(118,64,255,.62);
--bloom-hover:
inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(6,3,20,.6),
0 14px 26px -12px rgba(124,84,255,.85),
-12px 12px 20px -14px rgba(34,184,240,.40),
12px 12px 20px -14px rgba(255,61,90,.30);
--bloom-glass: inset 0 1px 0 rgba(222,212,255,.16), 0 1px 2px rgba(6,3,20,.5), 0 8px 18px -11px rgba(124,92,255,.58);
--bloom-glass-hover: inset 0 1px 0 rgba(222,212,255,.24), 0 1px 2px rgba(6,3,20,.5), 0 12px 24px -12px rgba(136,104,255,.82);
--act-hi: #5B21D6; 
--act: #4A18B8; 
--act-lo: #340C86;
--act-fill:
linear-gradient(180deg, var(--act-hi) 0%, var(--act) 52%, var(--act-lo) 100%) padding-box,
linear-gradient(125deg, rgba(120,210,255,.70) 0%, rgba(214,200,255,.78) 30%, rgba(150,118,255,.40) 55%, rgba(255,128,210,.45) 80%, rgba(40,12,104,.95) 100%) border-box;
--act-sheen: linear-gradient(55deg,
transparent 36%,
rgba(140,172,255,.20) 43%,
rgba(255,255,255,.25) 47.5%,
rgba(255,255,255,.25) 52.5%,
rgba(255,128,210,.20) 57%,
transparent 64%);
--glass-fill:
linear-gradient(180deg, rgba(164,136,255,.32) 0%, rgba(122,86,244,.22) 50%, rgba(98,56,216,.30) 100%),
linear-gradient(rgba(24,15,56,.86), rgba(24,15,56,.86));
--glass-edge: rgba(172,148,255,.52);
--glass-edge-hi: rgba(218,206,255,.72);
--glass-sheen: linear-gradient(55deg,
transparent 38%,
rgba(140,172,255,.15) 44%,
rgba(255,255,255,.20) 48.5%,
rgba(255,255,255,.20) 51.5%,
rgba(255,128,210,.15) 56%,
transparent 62%);
--motion: 1;
--ease-out: cubic-bezier(.16, 1, .3, 1); 
--ease: cubic-bezier(.2, .6, .2, 1);
--d-fast: calc(120ms * var(--motion));
--d-hover: calc(180ms * var(--motion));
--d-enter: calc(600ms * var(--motion));
--d-sheen: calc(6000ms * var(--motion)); 
--d-sheen-act: calc(8000ms * var(--motion)); 
--d-sheen-glass: calc(12000ms * var(--motion)); 
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: 1.6;
letter-spacing: .01em;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, canvas { display: block; max-width: 100%; }
svg { flex: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
@font-face {
font-family: "Funnel Display";
font-style: normal;
font-weight: 600 700;
font-display: swap;
src: url(fonts/funnel-display-latin.96468ae772.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Funnel Display";
font-style: normal;
font-weight: 600 700;
font-display: swap;
src: url(fonts/funnel-display-latin-ext.20bc54b005.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Funnel Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/funnel-sans-latin.db04420f79.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Funnel Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(fonts/funnel-sans-latin-ext.5dbcb1758a.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Funnel Display Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
font-weight: 600 700;
size-adjust: 100.45%;
ascent-override: 99.55%;
descent-override: 24.89%;
line-gap-override: 0%;
}
@font-face {
font-family: "Funnel Sans Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 400 500;
size-adjust: 100.47%;
ascent-override: 99.53%;
descent-override: 24.88%;
line-gap-override: 0%;
}
@font-face {
font-family: "Funnel Sans Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 600 800;
size-adjust: 95%;
ascent-override: 105.26%;
descent-override: 26.32%;
line-gap-override: 0%;
}
.ds {
font-family: var(--font-display);
font-synthesis: none;
font-weight: 700;
letter-spacing: -.016em;
line-height: 1.07;
text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: 1.05; }
.h2 { font-size: var(--fs-h2); letter-spacing: -.01em; line-height: 1.14; }
.h3 {
font-family: var(--font-text);
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -.004em;
line-height: 1.3;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-2);
max-width: 30em;
}
.prose { max-width: 41em; }
.prose + .prose { margin-top: var(--s3); }
.muted { color: var(--ink-2); }
.legal { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-2); }
.label {
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--ink-2);
}
.num { font-variant-numeric: tabular-nums lining-nums; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
@media (max-width: 480px) {
.nowrap, [style*="white-space: nowrap"] { white-space: normal !important; overflow-wrap: anywhere; }
}
.vh {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.spec-rule {
height: 1px; border: 0; margin: 0;
background:
var(--spectrum) left / 200px 100% no-repeat,
var(--line);
}
.spec-edge { height: 2px; border: 0; margin: 0; background: var(--spectrum); }
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.band { padding-block: var(--s9); }
.band--tight { padding-block: var(--s7); }
.band--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); }
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s5);
}
.page { position: relative; isolation: isolate; overflow: clip; }
main { position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; }
.skip {
position: absolute;
left: 50%;
top: 0;
z-index: 99;
transform: translate(-50%, -120%);
padding: 10px 18px;
border-radius: 0 0 var(--r-md) var(--r-md);
background: var(--ink);
color: #0B0C10;
font-size: var(--fs-sm);
font-weight: 700;
text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }
.lobby-bar {
display: flex;
align-items: center;
gap: var(--s4);
position: relative;
z-index: 1;
}
.lobby-bar .chips {
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
padding: 10px 6px;
margin: -8px -6px;
-webkit-mask-image: linear-gradient(90deg, #000 0 94%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 94%, transparent 100%);
}
.lobby-bar .chips::-webkit-scrollbar { display: none; }
:focus-visible {
outline: 2px solid var(--b);
outline-offset: 3px;
border-radius: 3px;
}
.btn:focus-visible { border-radius: var(--btn-r, var(--r-md)); --btn-ring: 0 0 0 3px var(--bg); }
::selection { background: var(--b); color: #04121A; }
body { caret-color: var(--b); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 3px solid var(--bg);
border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #4B5464; }
.beam {
position: absolute;
inset: 0 0 auto 0;
height: var(--beam-h);
z-index: 0;
pointer-events: none;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.30) 6%, #000 15%, #000 62%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.30) 6%, #000 15%, #000 62%, transparent 100%);
}
.beam__canvas { width: 100%; height: 100%; }
.beam--gl .beam__css { display: none; }
.beam--fallback .beam__canvas { display: none; }
.beam__css {
--ox: 23.5%; --oy: -22%; 
--hx: 57.5%; --hy: 38.5%; 
position: absolute;
inset: 0;
}
.beam__css::before,
.beam__css::after { content: ""; position: absolute; }
.beam__css::before {
left: var(--ox);
top: var(--oy);
width: calc(var(--hx) - var(--ox));
height: calc(var(--hy) - var(--oy));
background: linear-gradient(to top right,
transparent 43%,
rgba(255,255,255,.022) 48.4%,
rgba(255,255,255,.075) 49.5%,
rgba(255,255,255,.24) 50%,
rgba(255,255,255,.075) 50.5%,
rgba(255,255,255,.022) 51.6%,
transparent 57%);
-webkit-mask-image: linear-gradient(to bottom right, transparent 2%, rgba(0,0,0,.55) 14%, rgba(0,0,0,.88) 34%, #000 60%, #000 86%, transparent 99%);
mask-image: linear-gradient(to bottom right, transparent 2%, rgba(0,0,0,.55) 14%, rgba(0,0,0,.88) 34%, #000 60%, #000 86%, transparent 99%);
filter: blur(2.5px);
}
:root[data-enter="run"] .beam__css::before {
animation: beam-in calc(340ms * var(--motion)) var(--ease-out) both;
}
.beam__css::after {
inset: 0;
background:
radial-gradient(circle 96px at var(--hx) var(--hy),
rgba(255,255,255,.30) 0,
rgba(255,255,255,.10) 28%,
rgba(255,255,255,.02) 58%,
rgba(255,255,255,0) 82%),
radial-gradient(circle 360px at var(--hx) var(--hy),
rgba(198,214,255,.070) 0,
rgba(198,214,255,.038) 32%,
rgba(198,214,255,.010) 62%,
rgba(198,214,255,0) 84%),
conic-gradient(from 146deg at var(--hx) var(--hy),
transparent 0deg,
rgba(255,61,90,.40) 0.9deg, 
rgba(255,61,90,.23) 2.4deg,
rgba(255,176,0,.20) 8deg,
rgba(52,211,153,.18) 15deg,
rgba(34,184,240,.23) 22deg,
rgba(124,92,255,.26) 28.6deg,
rgba(124,92,255,.44) 30deg, 
transparent 31deg);
-webkit-mask-image: radial-gradient(85% 95% at var(--hx) var(--hy), #000 2%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.20) 66%, transparent 88%);
mask-image: radial-gradient(85% 95% at var(--hx) var(--hy), #000 2%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.20) 66%, transparent 88%);
transform-origin: var(--hx) var(--hy);
filter: blur(1.5px);
}
:root[data-enter="run"] .beam__css::after {
animation: fan-open calc(860ms * var(--motion)) var(--ease-out) both;
}
@keyframes beam-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes fan-open { 0% { opacity: 0; transform: rotate(-7deg) scale(.24); } 30% { opacity: .35; } 100% { opacity: 1; transform: none; } }
.beam-trace {
position: absolute;
right: -6%;
bottom: -30%;
width: 52%;
height: 190%;
pointer-events: none;
background: conic-gradient(from 196deg at 92% 96%,
transparent 0 5deg,
rgba(255,61,90,.20) 7deg,
rgba(255,176,0,.17) 11deg,
rgba(52,211,153,.16) 15deg,
rgba(34,184,240,.20) 19deg,
rgba(124,92,255,.22) 23deg,
transparent 26deg);
-webkit-mask-image: radial-gradient(110% 90% at 92% 96%, #000 4%, rgba(0,0,0,.45) 44%, transparent 80%);
mask-image: radial-gradient(110% 90% at 92% 96%, #000 4%, rgba(0,0,0,.45) 44%, transparent 80%);
filter: blur(22px);
opacity: .9;
}
.site-header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--s5);
min-height: var(--header-h);
padding-block: var(--s4);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s3);
color: var(--ink);
text-decoration: none;
flex: none;
}
.brand__mark { width: 30px; height: 30px; }
.brand__name {
font-family: var(--font-display);
font-synthesis: none;
font-size: 1.3125rem;
font-weight: 700;
letter-spacing: -.014em;
white-space: nowrap;
}
.brand:hover .brand__name { color: #FFF; }
.header__nav-row {
position: static;
inset: auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
color: inherit;
background: none;
display: contents;
}
.site-nav { display: flex; align-items: center; order: 1; margin-right: auto; }
.lang { order: 2; }
.header__end { order: 3; }
.site-nav__list { display: flex; align-items: center; gap: var(--s6); }
.site-nav__link {
display: inline-block;
padding: 6px 0;
white-space: nowrap;
font-size: .9375rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.site-nav__link:hover { color: #FFF; border-bottom-color: var(--line-strong); }
.site-nav__link[aria-current] { border-bottom-color: var(--ink); }
.header__end {
display: flex;
align-items: center;
gap: var(--s4);
margin-left: auto;
}
.lang { display: flex; align-items: center; gap: 2px; }
.lang__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-2);
text-decoration: none;
border-radius: var(--r-xs);
border: 1px solid transparent;
transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.lang__link:hover { color: var(--ink); border-color: var(--line); }
.lang__link[aria-current] {
color: var(--ink);
border-color: var(--line-strong);
background: var(--panel);
}
.signin {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 8px;
margin-inline: -8px;
font-size: .9375rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.signin:hover { color: #FFF; text-decoration: underline; text-underline-offset: 4px; }
.geo { position: relative; flex: none; }
.site-header .geo .geo__btn { --sheen-at: 11000ms; gap: 6px; padding: 0 10px 0 12px; letter-spacing: .04em; }
.geo__code { min-width: 1.5em; text-align: center; }
.geo__caret { transition: transform var(--d-hover) var(--ease); }
.geo__btn[aria-expanded="true"] .geo__caret { transform: rotate(180deg); }
.site-header:has(.geo__btn[aria-expanded="true"]) { z-index: 30; transition-delay: 0s; }
.geo__panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 5;
width: 17.5rem;
padding: 6px;
border-radius: var(--r-md);
border: 1px solid var(--line-strong);
background: var(--panel);
box-shadow: var(--shadow-3);
}
.geo__panel::before {
content: "";
position: absolute;
top: -1px;
left: 16px;
width: 48px;
height: 1px;
background: var(--spectrum);
}
.geo__title { padding: 8px 10px 6px; }
.geo__list { display: grid; gap: 2px; }
.geo__opt {
display: flex;
align-items: center;
gap: var(--s3);
width: 100%;
min-height: 48px;
padding: 6px 12px 6px 10px;
border-radius: var(--r-sm);
border: 1px solid transparent;
color: var(--ink);
text-align: left;
text-decoration: none;
transition: background-color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.geo__opt-code {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 24px;
border-radius: var(--r-xs);
border: 1px solid var(--line-strong);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .06em;
color: var(--ink-2);
}
.geo__opt-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.geo__opt-name { font-size: var(--fs-sm); font-weight: 600; }
.geo__opt-note { font-size: var(--fs-label); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
.geo__opt:hover { background-color: rgba(124,92,255,.14); border-color: rgba(172,148,255,.30); }
}
.geo__opt:active { background-color: rgba(124,92,255,.22); }
.geo__opt:focus-visible { outline-offset: 1px; border-radius: var(--r-sm); }
.geo__opt[aria-current] {
background: var(--glass-fill);
border-color: var(--glass-edge);
border-top-color: var(--glass-edge-hi);
box-shadow: var(--bloom-glass);
text-shadow: 0 1px 1px rgba(20,8,60,.5);
}
.geo__opt[aria-current] .geo__opt-code { color: #FFF; border-color: var(--glass-edge-hi); }
.geo__opt[aria-current] .geo__opt-note { color: #D9D2F5; }
.geo__opt[aria-current]::after {
content: "";
flex: none;
width: 11px;
height: 6px;
margin: 0 2px 3px auto;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-45deg);
}
@media (scripting: none) {
.geo { display: none; }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
height: 52px;
padding: 0 26px;
border-radius: var(--btn-r, var(--r-md));
font-size: 1rem;
font-weight: 600;
letter-spacing: .012em;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--d-hover) var(--ease),
border-color var(--d-hover) var(--ease),
box-shadow var(--d-hover) var(--ease),
color var(--d-hover) var(--ease),
transform var(--d-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { cursor: default; filter: saturate(.45); opacity: .72; }
main#main:focus { outline: none; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: var(--btn-ring, 0 0 #0000), var(--btn-glow); }
[data-cta]:not([href]) { cursor: pointer; }
.btn--primary,
.btn--secondary,
.btn--quiet {
position: relative;
isolation: isolate;
overflow: hidden;
overflow: clip;
overflow-clip-margin: 1px; 
color: #FFF;
border: 1px solid transparent;
box-shadow: var(--btn-ring, 0 0 #0000), var(--btn-glow);
}
@media (hover: hover) and (pointer: fine) {
:is(.btn--primary, .btn--secondary, .btn--quiet):hover { box-shadow: var(--btn-ring, 0 0 #0000), var(--btn-glow-hover); }
}
.btn--primary::before,
.btn--secondary::before,
.btn--quiet::before {
content: "";
position: absolute;
z-index: -1;
inset-block: -1px;
left: 0;
width: 260%;
pointer-events: none;
background: var(--btn-sheen, var(--act-sheen));
transform: translateX(15.5%); 
will-change: transform;
}
.btn--primary[data-sheen]::before,
.btn--secondary[data-sheen]::before,
.btn--quiet[data-sheen]::before {
animation: btn-pass var(--pass-d, 2400ms) cubic-bezier(.4,.08,.3,1) 1 both;
}
:is(.btn--secondary, .btn--quiet)[data-sheen] { --pass-d: 3600ms; }
.site-header .btn { --sheen-at: 4200ms; }
:is(.btn--secondary, .btn--quiet) + :is(.btn--secondary, .btn--quiet) { --sheen-at: 5400ms; }
:is(.btn--secondary, .btn--quiet) + :is(.btn--secondary, .btn--quiet) + :is(.btn--secondary, .btn--quiet) { --sheen-at: 9300ms; }
@keyframes btn-sheen {
0% { transform: translateX(-77%); }
30%, 100% { transform: translateX(15.5%); }
}
.btn--primary {
background: var(--act-fill);
background-color: var(--act);
background-size: 100% 165%, 100% 100%;
background-position: 0 35%, 0 0;
text-shadow: 0 1px 1px rgba(30,6,86,.45);
--btn-glow: var(--bloom);
--btn-glow-hover: var(--bloom-hover);
--sheen-at: 3000ms;
transition:
transform var(--d-fast) var(--ease),
background-position var(--d-hover) var(--ease),
box-shadow var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover { transform: translateY(-2px); background-position: 0 0, 0 0; }
}
.btn--primary:active { transform: translateY(1px); background-position: 0 100%, 0 0; }
.btn--lit {
overflow: visible;
--btn-glow:
inset 0 1px 0 rgba(255,255,255,.24),
0 1px 2px rgba(6,3,20,.6),
0 14px 28px -14px rgba(120,66,255,.85),
0 26px 56px -30px rgba(107,47,234,.60);
--btn-glow-hover: var(--btn-glow);
}
.btn--lit::before { content: none; } 
.btn__sheen {
position: absolute;
inset: -1px; 
z-index: -1;
border-radius: inherit;
overflow: hidden;
contain: paint;
pointer-events: none;
}
.btn__sheen::before {
content: "";
position: absolute;
inset-block: 0;
left: 0;
width: 260%;
background: var(--act-sheen);
transform: translateX(15.5%);
will-change: transform;
}
.btn--lit[data-sheen] .btn__sheen::before {
animation: btn-pass 2400ms cubic-bezier(.4,.08,.3,1) 1 both;
}
.btn--lit::after {
content: "";
position: absolute;
z-index: -2;
left: 14%;
right: 3%;
top: calc(100% - 6px);
height: 16px;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(90deg,
rgba(34,184,240,.30),
rgba(124,92,255,.80) 36%,
rgba(150,62,226,.72) 64%,
rgba(255,61,90,.24));
filter: blur(6px);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 50%);
mask-image: linear-gradient(180deg, transparent 0, #000 50%);
transform-origin: 50% 0;
opacity: .5;
will-change: opacity;
transition: opacity var(--d-hover) var(--ease), transform var(--d-hover) var(--ease-out);
}
.btn--lit[data-sheen]::after { animation: act-bloom 2400ms var(--ease) 1 both; }
@media (hover: hover) and (pointer: fine) {
.btn--lit:hover::after { animation: none; opacity: .85; transform: translateY(2px) scale(1.04, 1.12); }
}
.btn--lit:active::after { animation: none; opacity: .5; transform: scale(.9, .7); }
@keyframes act-sheen {
0% { transform: translateX(-77%); }
40%, 100% { transform: translateX(15.5%); }
}
@keyframes btn-pass {
from { transform: translateX(-77%); }
to { transform: translateX(15.5%); }
}
@keyframes act-bloom {
0%, 100% { opacity: .48; }
38% { opacity: .72; }
}
.btn--secondary,
.btn--quiet {
background: var(--glass-fill);
border-color: var(--glass-edge);
border-top-color: var(--glass-edge-hi);
text-shadow: 0 1px 1px rgba(20,8,60,.5);
--btn-glow: var(--bloom-glass);
--btn-glow-hover: var(--bloom-glass-hover);
--btn-sheen: var(--glass-sheen);
--btn-sheen-d: var(--d-sheen-glass);
--sheen-at: 2000ms;
transition:
transform var(--d-fast) var(--ease),
border-color var(--d-hover) var(--ease),
box-shadow var(--d-hover) var(--ease);
}
.btn--secondary::after,
.btn--quiet::after {
content: "";
position: absolute;
z-index: -2;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(160,132,255,.18), rgba(124,92,255,.06));
box-shadow: inset 0 0 0 1px rgba(196,180,255,.55);
opacity: 0;
transition: opacity var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
:is(.btn--secondary, .btn--quiet):hover { transform: translateY(-1px); border-color: rgba(204,188,255,.78); }
:is(.btn--secondary, .btn--quiet):hover::after { opacity: 1; }
}
:is(.btn--secondary, .btn--quiet):active { transform: translateY(1px); }
:is(.btn--secondary, .btn--quiet):active::after { opacity: .55; }
.btn--sm { --btn-r: 10px; height: 44px; padding: 0 16px; font-size: var(--fs-sm); }
.btn--route { --btn-r: 10px; height: 44px; padding: 0 16px; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
color: var(--ink-off);
background: var(--panel);
border-color: var(--line);
box-shadow: none;
text-shadow: none;
transform: none;
cursor: not-allowed;
pointer-events: none;
}
.btn[disabled]::before, .btn[disabled]::after,
.btn[aria-disabled="true"]::before, .btn[aria-disabled="true"]::after { content: none; }
.link {
color: var(--b);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: rgba(34,184,240,.45);
transition: text-decoration-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.link:hover { color: #6BD2FA; text-decoration-color: currentColor; }
.link--quiet { color: var(--ink); text-decoration-color: var(--line-strong); }
.link--quiet:hover { color: #FFF; text-decoration-color: var(--ink-2); }
.chips { display: flex; align-items: center; gap: var(--s2); }
.chip {
position: relative;
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 16px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
text-decoration: none;
transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease),
background-color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease);
}
.chip::after { content: ""; position: absolute; inset: -2px 0; }
@media (hover: hover) and (pointer: fine) {
.chip:hover { color: #FFF; border-color: var(--glass-edge); background-color: rgba(124,92,255,.16); box-shadow: 0 8px 18px -12px rgba(124,92,255,.75); }
}
.chip:active { color: #FFF; border-color: var(--glass-edge-hi); background-color: rgba(124,92,255,.26); box-shadow: 0 4px 12px -8px rgba(136,104,255,.9); }
.chip[aria-current] {
background: var(--glass-fill);
border-color: var(--glass-edge);
border-top-color: var(--glass-edge-hi);
color: #FFF;
text-shadow: 0 1px 1px rgba(20,8,60,.5);
box-shadow: var(--bloom-glass);
}
.badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: var(--r-xs);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
background: rgba(13,14,18,.78);
color: var(--ink);
border: 1px solid rgba(242,243,245,.22);
backdrop-filter: none;
}
.badge--hot { background: var(--r); border-color: var(--r); color: #23060C; }
.badge--new { background: var(--ink); border-color: var(--ink); color: #0B0C10; }
.badge--jackpot { background: var(--o); border-color: var(--o); color: #2A1C00; }
.badge--live { background: transparent; border-color: var(--line-strong); color: var(--ink); letter-spacing: .08em; }
.dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--r);
box-shadow: 0 0 0 3px rgba(255,61,90,.16);
flex: none;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-2); }
.field__control {
display: flex;
align-items: center;
gap: var(--s3);
height: 44px;
padding: 0 14px;
border-radius: var(--r-md);
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink-2);
transition: border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.field__control:hover { border-color: var(--line-strong); }
.field__control:focus-within { border-color: var(--b); background: var(--panel-2); outline: 2px solid rgba(34,184,240,.28); outline-offset: 0; }
.field__control input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
background: none;
outline: none;
color: var(--ink);
font-size: var(--fs-sm);
}
.field__control input::placeholder { color: var(--ink-2); opacity: 1; }
.field--search { width: 280px; }
.field--search .field__control { height: 40px; border-radius: var(--r-pill); padding-inline: 16px; }
.field--invalid .field__control { border-color: var(--r); }
.field__error { font-size: var(--fs-xs); color: var(--r); font-weight: 600; }
.hero {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 528px);
gap: var(--s8);
align-items: center;
padding-block: var(--s6);
}
.hero + .band--tight { padding-top: var(--s6); }
.hero__copy { display: flex; flex-direction: column; min-width: 0; }
.hero__h1 {
max-width: 16em;
min-height: 4.7em;
font-size: calc(var(--fs-h1) * .5);
line-height: 1.2;
letter-spacing: -.006em;
}
.hero__brand { font-size: 2em; line-height: 1.1; letter-spacing: -.022em; color: #FFF; }
.hero__tagline { font-weight: 600; color: #DADEE5; }
.hero__sub { margin-top: var(--s5); max-width: 33rem; }
html[lang="pl"] .hero__sub { min-height: 4.65em; }
@media (max-width: 410px) {
.hero__sub { max-width: 20.25rem; }
}
.hero__cta { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.hero__routes { display: flex; flex-wrap: wrap; gap: 10px; }
.key-terms {
position: relative;
flex: 1 1 16rem;
max-width: 22rem;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink);
}
.key-terms__age { color: var(--ink); font-weight: 700; }
.key-terms.key-terms--hdr { flex: none; max-width: none; white-space: nowrap; line-height: 1.25; }
.key-terms--hdr .link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
.hero .rg-line--hero { margin-top: var(--s6); }
.hero__plate { max-width: none; background: rgba(23,26,33,.9); }
.hero__plate .offer__body { border-top: 1px solid var(--line); }
.offer {
display: flex;
flex-direction: column;
border-radius: var(--r-lg);
background: var(--panel);
border: 1px solid var(--line);
overflow: hidden;
max-width: 560px;
box-shadow: var(--shadow-2);
}
.offer__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.offer__figure {
font-family: var(--font-display);
font-synthesis: none;
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.625rem);
font-weight: 700;
letter-spacing: -.014em;
line-height: 1.2;
color: var(--ink);
}
.offer__kicker {
font-size: .58em;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink-2);
white-space: nowrap;
}
.offer__kicker::after { content: " — "; color: var(--ink-3); }
.offer__terms { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
.offer--card { max-width: 720px; }
.offer--card .offer__body { gap: var(--s3); padding: clamp(18px, .9rem + 1vw, 28px); }
.offer__name {
font-family: var(--font-display);
font-synthesis: none;
font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.25;
color: var(--ink);
}
.offer__what { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); max-width: 36em; }
.offer__actions { margin-top: var(--s2); }
.qd {
display: flex;
flex-direction: column;
padding: 16px 18px 18px;
}
.qd > * + * { margin-top: var(--s3); }
.qd__hint { margin-top: var(--s2); } 
.qd__rails { margin-top: var(--s4); }
.qd__cap { margin-top: var(--s3); }
.qd__head { display: flex; align-items: center; gap: var(--s3); }
.qd__row { display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.qd__fields {
flex: 1 1 220px;
display: flex;
flex-direction: column;
gap: var(--s2);
margin: 0; padding: 0; border: 0;
min-width: 0;
}
.qd__fields .field__control { background: var(--bg-2); }
.qd__fields .field__control:hover { border-color: var(--line); }
.qd__cta {
flex: 0 0 auto;
--sheen-at: 8000ms;
--btn-glow-hover:
inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(6,3,20,.6),
0 10px 18px -11px rgba(124,84,255,.85),
-10px 8px 14px -12px rgba(34,184,240,.40),
10px 8px 14px -12px rgba(255,61,90,.30);
}
.qd__control { height: 52px; cursor: text; }
.qd__control svg { color: var(--ink-off); flex: none; }
.qd__label {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--s3);
height: 100%;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
cursor: text;
}
.qd__control .qd__input {
flex: 1 1 auto;
min-width: 0;
padding: 0;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0;
font-variant-numeric: tabular-nums lining-nums;
text-align: right;
color: var(--ink);
}
.qd__unit {
flex: none;
margin-left: -7px;
font-size: 1.0625rem;
font-weight: 600;
color: var(--ink-2);
}
.qd--invalid .qd__control,
.qd--invalid .qd__control:hover,
.qd--invalid .qd__control:focus-within { border-color: var(--r); }
.qd--invalid .qd__control:focus-within { outline-color: rgba(255,61,90,.30); }
.qd__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.qd__preset { justify-content: center; height: 36px; padding: 0 6px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.qd__preset::after { inset: -4px 0; }
html:lang(hu) .qd__fields { min-width: min(100%, 18rem); }
html:lang(hu) .qd__cta { flex: 1 1 100%; }
html:lang(hu) .qd__preset { padding-inline: 2px; }
.qd__preset[aria-pressed="true"] {
background: var(--glass-fill);
border-color: var(--glass-edge);
border-top-color: var(--glass-edge-hi);
color: #FFF;
text-shadow: 0 1px 1px rgba(20,8,60,.5);
}
.qd__msg {
min-height: 18px;
font-size: var(--fs-xs);
font-weight: 600;
line-height: 18px;
color: var(--r);
}
@media (scripting: none) {
.qd__presets { display: none; }
}
.qd__hint {
position: relative; 
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
font-size: var(--fs-xs);
color: var(--ink-2);
}
.qd__hint > .link { display: inline-flex; align-items: flex-start; min-height: 44px; padding-top: 6px; margin-block: -6px -17px; }
.qd__rails { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.rg-line { display: flex; align-items: flex-start; gap: var(--s3); max-width: 34em; }
.age {
flex: none;
width: 30px; height: 30px;
margin-top: 1px;
border-radius: 50%;
border: 1.5px solid var(--ink-2);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: var(--ink);
}
.rg-line__text { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-2); }
.grid-games {
position: relative; 
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--s4);
}
.tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 236px;
border-radius: 14px;
overflow: hidden;
color: var(--ink);
text-decoration: none;
isolation: isolate;
--disp: 1;
box-shadow:
-1px 0 0 rgba(34,184,240,.5),
1px 0 0 rgba(124,92,255,.5),
var(--shadow-2);
transition: box-shadow var(--d-hover) var(--ease-out);
}
.tile__art {
position: absolute;
inset: 0;
z-index: -2;
filter: brightness(.74) saturate(.94);
transition: filter var(--d-hover) var(--ease-out);
}
.tile__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(13,14,18,.34) 0%, rgba(13,14,18,0) 34%, rgba(13,14,18,.88) 100%),
linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px);
}
.tile__sym {
position: absolute;
left: 50%; top: 40%;
width: 58px; height: 58px;
transform: translate(-50%, -50%);
color: #FFF;
opacity: .94;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.tile__badge { position: absolute; top: 10px; left: 10px; }
.tile__meta { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 13px; }
.tile__meta b { font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.tile__meta small { font-size: var(--fs-xs); color: rgba(242,243,245,.66); }
.tile:hover,
.tile:focus-visible {
box-shadow:
calc(-3px * var(--disp)) 0 0 rgba(34,184,240,.9),
calc( 3px * var(--disp)) 0 0 rgba(124,92,255,.9),
var(--shadow-3);
}
.tile:hover .tile__art,
.tile:focus-visible .tile__art { filter: brightness(.95) saturate(1); }
.tile--rays .tile__art { background: repeating-conic-gradient(from 0deg at 50% 62%, var(--c1) 0 7deg, var(--c2) 7deg 14deg); }
.tile--stripes .tile__art { background: repeating-linear-gradient(135deg, var(--c1) 0 16px, var(--c2) 16px 32px); }
.tile--dots .tile__art { background: radial-gradient(var(--c2) 26%, transparent 28%) 0 0 / 26px 26px, var(--c1); }
.tile--rings .tile__art { background: repeating-radial-gradient(circle at 50% 62%, var(--c1) 0 12px, var(--c2) 12px 26px); }
.tile__shot {
position: absolute;
inset: 0;
z-index: -2; 
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.16);
transform-origin: 50% 0;
filter: brightness(.78) saturate(.92);
transition: filter var(--d-hover) var(--ease-out);
}
.tile:hover .tile__shot,
.tile:focus-visible .tile__shot { filter: brightness(1) saturate(1.02); }
.tile--shot .tile__sym { display: none; }
.tile--shot .tile__scrim {
background:
linear-gradient(180deg,
rgba(13,14,18,.44) 0%,
rgba(13,14,18,.06) 26%,
rgba(13,14,18,.38) 48%,
rgba(13,14,18,.74) 61%,
rgba(13,14,18,.95) 70%,
rgba(13,14,18,1) 76%,
rgba(13,14,18,1) 100%),
linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px);
}
.grid-live {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s4);
}
.live-card {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: 18px;
border-radius: var(--r-lg);
background: var(--panel);
border: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
box-shadow: var(--shadow-1);
transition: border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.live-card:hover { border-color: var(--line-strong); background: var(--panel-2); }
.live-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.live-card__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.live-card__count { font-size: var(--fs-xs); color: var(--ink-2); }
.live-card__visual {
display: grid;
place-items: center;
height: 152px;
border-radius: var(--r-md);
background: radial-gradient(120% 100% at 50% 0%, #10131A 0%, #0B0D11 100%);
border: 1px solid var(--line);
}
.live-card__visual svg { max-height: 150px; }
.live-card__name { font-size: 1rem; font-weight: 700; }
.live-card__meta { font-size: var(--fs-xs); color: var(--ink-2); }
.panel {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: 22px 24px;
border-radius: var(--r-lg);
background: var(--panel);
border: 1px solid var(--line);
}
.panel--wide { padding: 26px 30px; gap: var(--s4); align-items: flex-start; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.panel__note { font-size: var(--fs-xs); color: var(--ink-2); }
.card-svg text { font-family: var(--font-text); font-variant-numeric: lining-nums; }
.jackpot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
margin: 2px 0 4px;
}
.jackpot__lead {
font-family: var(--font-text);
font-size: var(--fs-lead);
font-weight: 600;
letter-spacing: 0;
color: var(--ink-2);
}
.jackpot__value {
font-family: var(--font-display);
font-synthesis: none;
font-size: clamp(2rem, 1.2rem + 2.6vw, 2.875rem);
font-weight: 700;
letter-spacing: -.018em;
line-height: 1.05;
font-variant-numeric: tabular-nums lining-nums;
color: var(--ink);
}
.jackpot__value .cents { font-size: .62em; color: var(--ink-2); letter-spacing: -.01em; }
.jackpot__caption { font-size: var(--fs-xs); color: var(--ink-2); }
.jackpot__caption + .cluster { margin-top: var(--s1); }
.panel--pool { padding: 26px 30px; gap: var(--s4); }
.pool {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--s5) var(--s7);
}
.pool__figure { display: flex; flex-direction: column; gap: var(--s2); }
.pool__figure .jackpot__caption { max-width: 37.5em; }
.wins {
--win-pad: var(--s4);
padding-block: var(--s4) var(--s5);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.wins__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; }
.wins__strip {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding-block: 2px;
-webkit-mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
}
.wins__strip::-webkit-scrollbar { display: none; }
.wins__strip:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.wins__rail { display: flex; width: max-content; }
.wins__list { display: flex; flex: none; }
.win-cell {
flex: none;
display: flex;
align-items: center;
gap: var(--s3);
padding-inline: var(--win-pad);
border-left: 1px solid var(--line);
}
.win-cell:first-child { padding-left: 0; border-left: 0; }
.wins__strip[data-marquee] {
overflow: hidden;
overflow: clip;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.wins__strip[data-marquee] .win-cell:first-child { padding-left: var(--win-pad); border-left: 1px solid var(--line); }
.wins__strip[data-marquee] .wins__rail {
animation: wins-run var(--wins-d, 120s) linear infinite;
will-change: transform;
}
.wins__strip[data-marquee]:hover .wins__rail,
.wins__strip[data-marquee]:focus-within .wins__rail,
.wins__strip[data-marquee][data-paused] .wins__rail,
.wins__strip[data-marquee]:not([data-inview]) .wins__rail { animation-play-state: paused; }
@keyframes wins-run {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.wins__toggle {
position: relative;
display: none;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 5.25rem;
height: 32px;
padding: 0 12px 0 10px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink);
font-size: var(--fs-xs);
font-weight: 600;
transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease),
background-color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease);
}
.wins__toggle::after { content: ""; position: absolute; inset: -6px 0; }
@media (scripting: enabled) {
.wins__toggle { display: inline-flex; }
}
@media (hover: hover) and (pointer: fine) {
.wins__toggle:hover { color: #FFF; border-color: var(--glass-edge); background-color: rgba(124,92,255,.16); box-shadow: 0 8px 18px -12px rgba(124,92,255,.75); }
}
.wins__toggle:active { color: #FFF; border-color: var(--glass-edge-hi); background-color: rgba(124,92,255,.26); }
.wins__toggle:focus-visible { border-radius: var(--r-pill); }
.wins__icon { flex: none; }
.wins__icon--play,
.wins__toggle[data-state="paused"] .wins__icon--pause { display: none; }
.wins__toggle[data-state="paused"] .wins__icon--play { display: block; }
.win-cell__art {
position: relative;
flex: none;
width: 56px; height: 56px;
border-radius: var(--r-sm);
overflow: hidden;
border: 1px solid var(--line);
background: var(--panel);
}
.win-cell__shot {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.16);
transform-origin: 50% 0;
filter: brightness(.82) saturate(.92);
}
.win-cell__art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(13,14,18,0) 0%,
rgba(13,14,18,.30) 48%,
rgba(13,14,18,.80) 68%,
var(--bg) 78%);
}
.win-cell__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.win-cell__amt { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--g); }
.win-cell__game { font-size: var(--fs-xs); color: var(--ink); white-space: nowrap; }
.win-cell__body:has(.win-cell__who) { gap: 0; }
.win-cell__body:has(.win-cell__who) .win-cell__amt { line-height: 1.25; }
.win-cell__body:has(.win-cell__who) .win-cell__game { line-height: 1.3; }
.win-cell__who { font-size: var(--fs-label); line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table.data {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums lining-nums;
}
table.data caption {
text-align: left;
padding-bottom: var(--s3);
font-size: var(--fs-xs);
color: var(--ink-2);
}
table.data th,
table.data td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
table.data thead th {
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--ink-2);
border-bottom-color: var(--line-strong);
}
table.data--phrase-head thead th {
font-size: var(--fs-xs);
letter-spacing: .01em;
text-transform: none;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:last-child th { border-bottom: 0; }
table.data td:first-child, table.data th:first-child { padding-left: 0; }
table.data td:last-child, table.data th:last-child { padding-right: 0; text-align: right; }
table.data .win { color: var(--g); font-weight: 700; }
table.data .who { color: var(--ink); font-weight: 600; }
table.data .game { color: var(--ink-2); }
table.data td.fig, table.data th.fig { color: var(--ink); font-weight: 600; }
table.data td.fig--end, table.data th.fig--end { text-align: right; }
table.data td.say, table.data th.say { white-space: normal; text-align: left; min-width: 14.5em; color: var(--ink-2); }
table.data td.say:last-child, table.data th.say:last-child { padding-right: 0; }
@media (max-width: 700px) {
table.data th[scope="row"] { white-space: normal; }
table.data thead th { white-space: normal; }
table.data td.say, table.data th.say { min-width: 9em; }
table.data th, table.data td { padding-inline: 8px; }
.table-wrap { padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.table-wrap::-webkit-scrollbar { display: block; height: 6px; }
}
.rails { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rail {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 14px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
background: var(--panel);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink);
}
.rail svg { color: var(--ink-2); }
.rails--sm .rail { height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
.trust {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s5);
padding: var(--s5) 0 0;
}
.trust__item { display: flex; gap: var(--s3); align-items: flex-start; }
.trust__icon { color: var(--ink-2); margin-top: 1px; }
.trust__k { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.trust__v { display: block; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.notice {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: var(--s3);
padding: 13px 16px;
border-radius: var(--r-md);
background: #1A1116;
border: 1px solid #4A2230;
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink);
}
.notice__icon { color: var(--r); flex: none; margin-top: 2px; }
.notice--info { background: #101820; border-color: #21384A; }
.notice--info .notice__icon { color: var(--b); }
.statutory-wrap > .statutory { margin-block: var(--s7) 0; }
.statutory {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--panel);
border: 1px solid var(--line-strong);
border-left: 1px solid var(--line-strong);
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--ink);
font-weight: 600;
}
.rg {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--s8);
align-items: start;
}
.rg__main { display: flex; flex-direction: column; gap: var(--s4); }
.rg__main .lead { max-width: 32.5em; }
.rg__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s4); }
.rg__tool { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s3); border-top: 1px solid var(--line); }
.rg__tool-icon { color: var(--ink-2); }
.rg__tool-name { font-size: 1.0625rem; font-weight: 700; }
.rg__tool-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.helpline {
display: flex;
flex-direction: column;
gap: var(--s2);
padding: 20px 22px;
border-radius: var(--r-lg);
background: var(--panel);
border: 1px solid var(--line);
}
.helpline__name { font-size: var(--fs-sm); font-weight: 700; }
.helpline__phone {
font-family: var(--font-display);
font-synthesis: none;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -.006em;
color: var(--ink);
text-decoration: none;
font-variant-numeric: tabular-nums lining-nums;
}
.helpline__phone:hover { color: #FFF; text-decoration: underline; text-underline-offset: 5px; }
.helpline__meta { font-size: var(--fs-xs); color: var(--ink-2); }
.breadcrumbs { padding-block: var(--s5) 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
margin-bottom: var(--s5);
}
.lobby-bar + .section-head { margin-top: var(--s7); }
.section-head__link { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.section-head__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.section-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
margin-top: var(--s5);
flex-wrap: wrap;
}
.section-foot__note { font-size: var(--fs-xs); color: var(--ink-2); }
.switcher { display: flex; align-items: center; gap: var(--s2); }
.switcher[hidden] { display: none; }
.switcher__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease),
background-color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease),
transform var(--d-fast) var(--ease);
}
.switcher__btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
.switcher__btn:hover:not(:disabled) { color: #FFF; border-color: var(--glass-edge); background-color: rgba(124,92,255,.16); box-shadow: 0 8px 18px -12px rgba(124,92,255,.75); }
}
.switcher__btn:active:not(:disabled) { color: #FFF; border-color: var(--glass-edge-hi); background-color: rgba(124,92,255,.26); box-shadow: 0 4px 12px -8px rgba(136,104,255,.9); transform: translateY(1px); }
.switcher__btn:disabled { color: var(--ink-off); border-color: var(--line); background: none; cursor: default; }
.grid-games[data-swap] > .tile {
animation: lobby-in calc(240ms * var(--motion)) var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 26ms * var(--motion));
}
.grid-games[data-swap="prev"] > .tile { animation-name: lobby-in-back; }
@keyframes lobby-in { from { opacity: 0; transform: translate3d( 16px, 0, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lobby-in-back { from { opacity: 0; transform: translate3d(-16px, 0, 0) scale(.985); } to { opacity: 1; transform: none; } }
.grid-games[data-swap]::after {
content: '';
position: absolute;
inset: -6px;
z-index: 3;
pointer-events: none;
background: linear-gradient(104deg,
transparent 38%,
rgba(124, 92,255,.16) 44%,
rgba( 34,184,240,.20) 47.5%,
rgba( 52,211,153,.17) 51%,
rgba(255,176, 0,.13) 54.5%,
rgba(255, 61, 90,.10) 58%,
transparent 64%);
animation: lobby-sweep calc(420ms * var(--motion)) var(--ease-out) both;
}
.grid-games[data-swap="prev"]::after { animation-name: lobby-sweep-back; }
@keyframes lobby-sweep { from { transform: translate3d(-70%, 0, 0); } to { transform: translate3d( 70%, 0, 0); } }
@keyframes lobby-sweep-back { from { transform: translate3d( 70%, 0, 0); } to { transform: translate3d(-70%, 0, 0); } }
.steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s5) var(--s7);
}
.step {
display: flex;
align-items: flex-start;
gap: var(--s3);
padding-top: var(--s3);
border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__n {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
font-size: var(--fs-label);
font-weight: 600;
font-variant-numeric: tabular-nums lining-nums;
color: var(--ink-2);
}
.step__body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.step__name { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.step__desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.page-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--s8);
align-items: start;
padding-block: var(--s6) 0;
}
.page-head__copy { display: flex; flex-direction: column; gap: var(--s4); }
.page-head__copy .lead { max-width: 30em; }
.page-head__copy .prose { max-width: 37.5em; }
.page-head__facts { width: 100%; max-width: 560px; }
.page-rule { padding-top: var(--s7); }
.defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--s5); margin: 0; }
.defs > dt {
padding: 9px 0;
border-top: 1px solid var(--line);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--ink);
}
.defs > dd {
padding: 9px 0;
margin: 0;
border-top: 1px solid var(--line);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-2);
}
.defs > dt:first-of-type,
.defs > dt:first-of-type + dd { border-top: 0; }
.defs--split { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s4); }
.defs--split > dd { text-align: right; color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.defs--split > dd.defs__long { grid-column: 1 / -1; padding-top: 0; border-top: 0; text-align: left; white-space: normal; font-weight: 400; }
.defs--split > dt { white-space: nowrap; }
.defs--split > dt:has(+ dd.defs__long) { grid-column: 1 / -1; }
.defs--split > dt.defs__long { white-space: normal; }
html:lang(hu) .defs--split > dt { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.defs--wide { grid-template-columns: 232px minmax(0, 1fr); gap: 0 var(--s6); }
.defs--wide > dt { padding-block: 16px; font-size: var(--fs-body); }
.defs--wide > dd { padding-block: 16px; font-size: var(--fs-body); line-height: 1.6; max-width: 40em; }
.steps--long { grid-template-columns: minmax(0, 1fr); gap: 0; }
.steps--long .step { padding: var(--s5) 0; gap: var(--s4); }
.steps--long .step__n { width: 26px; height: 26px; font-size: var(--fs-xs); }
.steps--long .step__body { gap: var(--s2); }
.steps--long .step__name { font-size: 1.0625rem; }
.steps--long .step__desc { font-size: var(--fs-body); line-height: 1.6; max-width: 39em; }
.page-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
flex-wrap: wrap;
margin-top: var(--s7);
padding-top: var(--s5);
border-top: 1px solid var(--line);
font-size: var(--fs-xs);
color: var(--ink-2);
}
@media (max-width: 1080px) {
.page-head { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); }
.defs--wide { grid-template-columns: 200px minmax(0, 1fr); gap: 0 var(--s5); }
}
@media (max-width: 980px) {
.page-head { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s5) 0; }
}
@media (max-width: 700px) {
.defs, .defs--wide, .defs--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.defs > dt { padding: 14px 0 0; }
.defs > dd { padding: 3px 0 14px; border-top: 0; text-align: left; white-space: normal; }
.defs > dt:first-of-type { padding-top: 0; }
.defs--split > dt { white-space: normal; font-weight: 600; color: var(--ink-2); }
.defs--split > dd { font-weight: 700; color: var(--ink); }
.defs--split > dd.defs__long { font-weight: 400; color: var(--ink); }
.steps--long .step { padding: var(--s4) 0; }
}
.site-footer {
position: relative;
overflow: hidden;
background: var(--bg-2);
border-top: 1px solid var(--line);
margin-top: var(--s9);
}
.site-footer > .wrap { position: relative; z-index: 1; }
.footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: var(--s7);
padding-block: var(--s8) var(--s7);
}
.footer__col-title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s3); }
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer__links a { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__about { display: flex; flex-direction: column; gap: var(--s3); max-width: 26.5em; }
.footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
flex-wrap: wrap;
padding-block: var(--s5);
border-top: 1px solid var(--line);
font-size: var(--fs-xs);
color: var(--ink-2);
}
.footer__bar .lang__link { color: var(--ink-2); }
@media (max-width: 1320px) {
:root { --gutter: 48px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: var(--s7); }
.qd__cta { flex: 1 1 100%; }
.qd__hint { margin-top: var(--s3); }
.footer__grid { gap: var(--s6); }
}
@media (max-width: 1180px) {
:root { --beam-h: 900px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--s6); }
.grid-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-live { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
:root { --gutter: 40px; }
.rg { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
}
@media (min-width: 1024px) and (max-width: 1080px) {
.site-header { flex-wrap: wrap; gap: var(--s4) var(--s5); padding-block: var(--s4) 0; }
.header__end { order: 2; }
.header__nav-row {
order: 3;
width: 100%;
display: flex;
align-items: center;
gap: var(--s4);
border-top: 1px solid var(--line);
margin-top: var(--s3);
padding: var(--s3) 0;
}
.site-nav {
flex: 1;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 92%, transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav { padding-block: 6px; margin-block: -6px; }
.site-nav__list { gap: var(--s5); padding: 0; }
.site-nav__link { padding-block: 10px; }
.site-nav { margin-right: var(--s5); }
.lang { flex: none; }
}
@media (min-width: 961px) and (max-width: 1000px) {
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--s5); }
.hero__routes { max-width: 26rem; }
}
@media (max-width: 960px) {
.hero { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.hero__copy { max-width: 720px; }
.hero__plate { max-width: 560px; }
}
@media (max-width: 900px) {
.lobby-bar { flex-direction: column-reverse; align-items: stretch; }
.lobby-bar .chips { flex: none; }
.lobby-bar .field--search { width: 100%; }
.split { grid-template-columns: minmax(0, 1fr); }
.pool { grid-template-columns: minmax(0, 1fr); align-items: start; }
.grid-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
:root { --gutter: 24px; --beam-h: 760px; }
.band { padding-block: var(--s7); }
.grid-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { height: 206px; }
.rg__tools { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 600px) {
:root { --gutter: 20px; --beam-h: 700px; }
.hero { padding-block: var(--s3) var(--s6); gap: var(--s3); }
.hero__h1 { font-size: clamp(20px, 5.6vw, 22px); }
.hero__sub { margin-top: 10px; font-size: var(--fs-body); }
.hero__cta { margin-top: var(--s3); gap: var(--s3); }
.hero__act { row-gap: var(--s3); }
.hero__act .btn--lit { flex: 1 1 100%; }
.hero__act .btn--lit::after { left: 18%; right: 6%; top: calc(100% - 9px); height: 14px; filter: blur(5px); }
.key-terms { flex-basis: 100%; max-width: none; }
.hero__routes { gap: var(--s2); }
.hero__routes .btn--route { padding: 0 14px; font-size: .875rem; }
.hero .rg-line--hero { margin-top: var(--s4); }
.qd__row { gap: var(--s2); }
.qd__hint { margin-top: var(--s2); }
.grid-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.grid-live { grid-template-columns: minmax(0, 1fr); }
.tile { height: 194px; }
.tile__sym { width: 48px; height: 48px; }
.trust { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-block: var(--s7) var(--s6); }
.footer__bar { flex-direction: column; align-items: flex-start; gap: var(--s3); }
.section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.field--search { width: 100%; }
.wins { --win-pad: var(--s3); }
}
@media (max-width: 409.98px) {
:root { --fs-h1: clamp(2.1875rem, 10vw - .0625rem, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
:root { --motion: 0; }
.btn::before, .btn::after, .btn__sheen::before { animation: none !important; }
}
:root[data-motion="off"] { --motion: 0; }
:root[data-motion="off"] .btn::before,
:root[data-motion="off"] .btn::after,
:root[data-motion="off"] .btn__sheen::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
.wins__strip[data-marquee] {
overflow-x: auto;
overflow-y: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
}
.wins__strip[data-marquee] .wins__rail { animation: none; will-change: auto; }
.wins__strip[data-marquee] .win-cell:first-child { padding-left: 0; border-left: 0; }
.wins__list[aria-hidden="true"],
.wins__toggle { display: none; }
}
:root[data-motion="off"] .wins__strip[data-marquee] {
overflow-x: auto;
overflow-y: hidden;
-webkit-mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
}
:root[data-motion="off"] .wins__strip[data-marquee] .wins__rail { animation: none; will-change: auto; }
:root[data-motion="off"] .wins__strip[data-marquee] .win-cell:first-child { padding-left: 0; border-left: 0; }
:root[data-motion="off"] .wins__list[aria-hidden="true"],
:root[data-motion="off"] .wins__toggle { display: none; }
table.data--prose { table-layout: fixed; }
table.data--prose th,
table.data--prose td { white-space: normal; vertical-align: top; line-height: 1.55; }
table.data--prose td { color: var(--ink-2); }
table.data--prose th[scope="row"] { color: var(--ink); font-weight: 700; }
table.data--prose thead th { vertical-align: bottom; }
table.data--prose td:last-child,
table.data--prose th:last-child { text-align: left; }
.duo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s6) var(--s8);
align-items: start;
}
.duo--aside { grid-template-columns: minmax(0, 1fr) 380px; }
.duo__col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.measure { max-width: 51em; }
.sample { margin: 0; }
.sample fieldset {
display: flex;
flex-direction: column;
gap: var(--s4);
margin: 0; padding: 0; border: 0;
min-width: 0;
}
.sample legend { padding: 0; }
.sample .field__control { background: var(--bg-2); }
.sample .field__control:hover { border-color: var(--line); }
.sample .field__control input {
color: var(--ink-off);
-webkit-text-fill-color: var(--ink-off);
opacity: 1;
cursor: not-allowed;
}
.sample .btn { pointer-events: none; cursor: default; }
.sample__caption { margin-top: var(--s4); }
.defs--index > dt { font-weight: 600; }
.defs--index > dt a { color: var(--ink); text-decoration-color: var(--line-strong); }
.defs--index > dt a:hover { color: #FFF; text-decoration-color: var(--ink-2); }
.defs--index > dt [aria-current] { color: var(--ink-2); }
@media (max-width: 1080px) {
.duo--aside { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); }
}
@media (max-width: 980px) {
.duo--aside { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 900px) {
.duo { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 700px) {
table.data--prose { table-layout: auto; }
}
@media (max-width: 600px) {
table.data--prose:has(thead th:nth-child(3)),
table.data--prose:has(thead th:nth-child(3)) caption,
table.data--prose:has(thead th:nth-child(3)) tbody,
table.data--prose:has(thead th:nth-child(3)) tr,
table.data--prose:has(thead th:nth-child(3)) th[scope="row"],
table.data--prose:has(thead th:nth-child(3)) td { display: block; }
table.data--prose:has(thead th:nth-child(3)) thead {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
table.data--prose:has(thead th:nth-child(3)) tr { padding-block: 14px; border-top: 1px solid var(--line); }
table.data--prose:has(thead th:nth-child(3)) tbody tr:first-child { border-top-color: var(--line-strong); }
table.data--prose:has(thead th:nth-child(3)) th[scope="row"],
table.data--prose:has(thead th:nth-child(3)) td { padding: 0; border-bottom: 0; }
table.data--prose:has(thead th:nth-child(3)) th[scope="row"] { color: var(--ink); font-weight: 700; }
table.data--prose:has(thead th:nth-child(3)) td { margin-top: 10px; }
table.data--prose:has(thead th:nth-child(3)) td::before {
content: attr(data-label);
content: attr(data-label) / "";
display: block;
margin-bottom: 2px;
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.45;
color: var(--ink-2);
}
}
.game-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--s7);
align-items: center;
}
.game-row__copy { display: flex; flex-direction: column; gap: var(--s4); }
.art-plate {
display: grid;
place-items: center;
height: 210px;
padding: var(--s4);
border-radius: var(--r-lg);
background: radial-gradient(120% 100% at 50% 0%, #10131A 0%, #0B0D11 100%);
border: 1px solid var(--line);
}
.art-plate svg { max-height: 178px; width: auto; }
.art-figure { display: flex; flex-direction: column; gap: var(--s3); margin: 0; }
.art-figure figcaption { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
table.data.data--keycol th[scope="row"] { width: 232px; }
.table-wrap--prose { max-width: 780px; }
.after-grid { margin-top: var(--s7); }
@media (max-width: 1080px) {
table.data.data--keycol th[scope="row"] { width: 200px; }
}
@media (max-width: 980px) {
.game-row { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.art-plate { height: 190px; }
.art-plate svg { max-height: 160px; }
}
@media (max-width: 700px) {
table.data.data--keycol th[scope="row"] { width: auto; }
table.data.data--keycol td { white-space: normal; }
}
.lvl { display: inline-flex; align-items: center; gap: 9px; }
.lvl::before {
content: "";
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--lvl, var(--ink-3));
}
.stack > .h3 { margin-top: var(--s2); }
.offer__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
}
.offer__more { font-size: var(--fs-xs); }
.start {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
margin-top: var(--s2);
}
.start__step { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.start__step .step__n { margin-top: 1px; }
.start__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; color: var(--ink); }
.start__desc { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2); }
html:lang(hu) .start__desc { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.lobby .section-head { margin-bottom: var(--s4); }
.lobby .lobby-bar { margin-bottom: var(--s5); }
.lobby .lobby-bar .chips { -webkit-mask-image: none; mask-image: none; }
.pay {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: var(--s8);
align-items: start;
}
.pay__copy { display: flex; flex-direction: column; gap: var(--s4); }
.pay__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-sm); font-weight: 600; }
.pay__facts { gap: var(--s2); }
.who { padding-bottom: 0; }
.who .section-head { margin-bottom: var(--s5); }
.trust--five {
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: var(--s5) 0;
border-block: 1px solid var(--line);
}
.trust__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust__link { margin-top: var(--s2); font-size: var(--fs-xs); align-self: flex-start; }
.who__defs { margin-top: var(--s6); }
.rg__more { font-size: var(--fs-sm); font-weight: 600; }
.pending { color: var(--ink-2); cursor: default; }
.footer__links .pending { font-size: var(--fs-sm); }
.site-nav__link.pending:hover { color: var(--ink-2); border-bottom-color: transparent; }
.rg-line__text .pending,
.who__defs .pending,
.notice .pending { color: inherit; }
.rg-line--hero { max-width: 34rem; }
.rg-line--hero .rg-line__text { font-size: var(--fs-sm); color: var(--ink); }
.qd__geo { flex-basis: 100%; }
.footer__grid--site {
grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
gap: var(--s6);
}
.footer__grid--site .footer__links li { display: block; }
@media (min-width: 1024px) and (max-width: 1080px) {
.site-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "brand . end" "nav nav nav";
align-items: center;
gap: var(--s4) var(--s4);
}
.site-header > .brand { grid-area: brand; }
.site-header > .header__end { grid-area: end; margin-left: 0; }
.site-header > .header__nav-row { grid-area: nav; margin-top: 0; }
}
.beam__canvas { opacity: 0; transition: opacity calc(900ms * var(--motion)) var(--ease-out); }
.beam--gl .beam__canvas { opacity: 1; }
.beam--gl .beam__css {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity calc(900ms * var(--motion)) var(--ease-out),
visibility 0s linear calc(900ms * var(--motion));
}
@media (max-width: 1320px) {
.trust--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__grid--site { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer__grid--site .footer__about { grid-column: 1 / -1; max-width: 46em; }
}
@media (max-width: 1080px) {
.trust--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__grid--site { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
}
@media (max-width: 980px) {
.pay { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.pay__facts { max-width: 560px; }
}
@media (max-width: 760px) {
.start { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 600px) {
.trust--five { grid-template-columns: minmax(0, 1fr); }
.footer__grid--site { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
}
.menu__head,
.menu__account,
.menu__market,
.menu__foot,
.site-nav__sub,
.menu-scrim,
.menu-toggle { display: none; }
.site-nav__short { display: none; }
.site-nav__home { display: none; }
@media (max-width: 1023.98px) {
.site-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "brand . end" "nav nav nav";
align-items: center;
gap: var(--s4);
padding-block: var(--s4) 12px;
}
.site-header > .brand { grid-area: brand; min-height: 44px; }
.site-header > .header__end { grid-area: end; margin-left: 0; }
.site-header > .header__nav-row { grid-area: nav; display: flex; }
.site-nav { flex: 1; min-width: 0; margin: 0; }
.site-nav__list {
position: relative;
flex: 1;
min-width: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min-content, 1fr);
gap: 1px;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(29,33,42,.84), rgba(17,19,25,.84));
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px -18px rgba(0,0,0,.8);
overflow: hidden;
overflow: clip;
}
.site-nav__list::before {
content: "";
position: absolute;
top: 0;
left: 14px;
right: 14px;
height: 1px;
background: var(--spectrum);
opacity: .5;
pointer-events: none;
}
.site-nav__list > li { display: flex; min-width: 0; box-shadow: -1px 0 0 var(--line); }
.site-nav__link {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 6px;
border-bottom: 0;
font-size: .875rem;
line-height: 1.1;
text-align: center;
white-space: normal;
transition: color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease);
}
.site-nav__link:active { background-color: rgba(242,243,245,.06); }
.site-nav__link[aria-current] {
color: #FFF;
background-color: rgba(242,243,245,.07);
box-shadow: inset 0 -2px 0 var(--ink);
}
.site-nav__link:focus-visible { outline-offset: -4px; border-radius: 9px; }
.site-nav__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.site-nav__short { display: inline; }
.site-nav__short::before { content: attr(data-short); }
}
@media (max-width: 600px) {
.site-header { row-gap: 20px; }
.key-terms--hdr .key-terms__more { display: inline; }
.site-header { padding-block-end: 24px; }
.header__end { position: relative; }
.key-terms.key-terms--hdr { position: absolute; right: 0; top: calc(100% + 1px); font-size: var(--fs-label); line-height: 14px; }
}
@media (max-width: 430px) {
.site-header { column-gap: 6px; }
.brand { gap: var(--s2); }
.site-header .brand__name { font-size: 1rem; }
.header__end { gap: var(--s3); }
.header__end .btn--sm { padding-inline: 14px; }
}
@media (max-width: 359.98px) {
.site-header { column-gap: 0; }
.site-header .brand { gap: 6px; }
.site-header .brand__mark { width: 26px; height: 26px; }
.site-header .brand__name { font-size: .8125rem; }
.header__end { gap: 0; }
.header__end .signin { margin-right: 0; }
.header__end .btn--sm { padding-inline: 12px; }
.site-nav__link { padding-inline: 4px; font-size: .8125rem; }
}
@media (max-width: 1023.98px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header {
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas: "brand . end menu";
column-gap: 0;
padding-block: var(--s4);
transition: z-index 0s linear calc(200ms * var(--motion));
}
.site-header > .header__end { margin-left: var(--s3); }
.header__end .signin { display: none; }
.menu__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: var(--r-md);
border: 1px solid var(--line-strong);
background: rgba(13,14,18,.55);
color: var(--ink);
font: inherit;
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
transition: border-color var(--d-hover) var(--ease), background-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease);
}
.menu__btn svg { flex: none; }
.menu__btn:active { background-color: var(--panel-2); }
.menu__btn:focus-visible { border-radius: var(--r-md); }
.menu-toggle { grid-area: menu; margin-left: var(--s3); }
.menu__close { width: 44px; padding: 0; }
.site-header > .header__nav-row {
grid-area: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
z-index: 2;
width: 100%;
height: auto;
margin: 0;
padding: 0 var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(90% 34% at 100% var(--header-h), rgba(124,92,255,.17), transparent 72%),
radial-gradient(80% 26% at 0% 100%, rgba(34,184,240,.07), transparent 72%),
var(--bg);
box-shadow: -1px 0 0 var(--line), -40px 0 80px -40px rgba(0,0,0,.9);
visibility: hidden;
opacity: 0;
transform: translateX(32px);
transition-property: opacity, transform, visibility, overlay;
transition-duration: calc(160ms * var(--motion)), calc(200ms * var(--motion)), 0s, calc(200ms * var(--motion));
transition-timing-function: var(--ease);
transition-delay: 0s, 0s, calc(200ms * var(--motion)), 0s;
transition-behavior: allow-discrete;
}
.site-header > .header__nav-row:popover-open {
visibility: visible;
opacity: 1;
transform: none;
transition-duration: calc(200ms * var(--motion)), calc(340ms * var(--motion)), 0s, 0s;
transition-timing-function: var(--ease-out);
transition-delay: 0s;
}
.site-header:has(> .header__nav-row:popover-open) { z-index: 30; transition-delay: 0s; }
html:has(.header__nav-row:popover-open) { overflow: hidden; }
html:has(.header__nav-row:popover-open) body { padding-right: var(--menu-sbw, 0px); }
.menu__head {
position: sticky;
top: 0;
z-index: 1;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
min-height: var(--header-h);
margin: 0 calc(-1 * var(--gutter)) var(--s2);
padding-inline: var(--gutter);
background: var(--bg);
}
.menu__head::before,
.menu__head::after {
content: "";
position: absolute;
left: var(--gutter);
bottom: 0;
height: 1px;
}
.menu__head::before { right: var(--gutter); background: var(--line); }
.menu__head::after { width: 48px; background: var(--spectrum); }
.site-nav { display: block; flex: none; order: 0; margin: 0; }
.site-nav__list {
position: static;
flex: none;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.site-nav__list::before { content: none; }
.site-nav__list > li { position: relative; display: block; box-shadow: none; border-bottom: 1px solid var(--line); }
.site-nav__home { display: block; }
.site-nav__link {
flex: none;
justify-content: space-between;
gap: var(--s4);
height: auto;
min-height: 60px;
padding: 0;
font-family: var(--font-display);
font-synthesis: none;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -.006em;
line-height: 1.2;
text-align: left;
border-radius: var(--r-xs);
}
.site-nav__link:active { background-color: transparent; }
.site-nav__link:focus-visible { outline-offset: 3px; border-radius: var(--r-xs); }
.site-nav__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
.site-nav__short { display: none; }
.site-nav__link::after {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-right: 6px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
color: var(--ink-3);
transform: rotate(45deg);
transition: color var(--d-hover) var(--ease), transform var(--d-hover) var(--ease);
}
.site-nav__link:focus-visible::after { color: var(--b); }
.site-nav__link[aria-current] { color: #FFF; background-color: transparent; box-shadow: none; }
.site-nav__link[aria-current]::before {
content: "";
position: absolute;
left: calc(-1 * var(--gutter));
top: 16px;
width: 3px;
height: 28px;
border-radius: 0 3px 3px 0;
background: linear-gradient(var(--v), var(--b));
}
.site-nav__sub { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: -2px; padding: 0 0 var(--s4); }
.site-nav__sub .chip { color: var(--ink); font-size: .9375rem; }
.site-nav__sub .chip[aria-current] { color: #FFF; }
.menu__account { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s5); }
.site-header .menu__register,
.site-header .menu__signin { width: 100%; }
.site-header .menu__register { --sheen-at: 900ms; }
.site-header .menu__signin { --sheen-at: 1400ms; }
.site-header .key-terms--menu { flex: none; max-width: none; margin-top: calc(-1 * var(--s1)); color: var(--ink-2); }
.header__nav-row .btn::before { animation-play-state: paused; }
.header__nav-row:popover-open .btn::before { animation-play-state: running; }
.menu__help-link {
display: flex;
align-items: center;
min-height: 52px;
padding: 0 var(--s4);
border-radius: var(--r-md);
border: 1px solid var(--line-strong);
background: var(--panel);
color: var(--ink);
font-weight: 600;
text-decoration: none;
}
.menu__market { display: grid; gap: var(--s3); padding-top: var(--s6); }
.menu__markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.menu__markets li { display: flex; }
.menu__markets .geo__opt { min-height: 60px; border-color: var(--line); background-color: var(--panel); }
.menu__markets .geo__opt[aria-current] {
background: var(--glass-fill);
border-color: var(--glass-edge);
border-top-color: var(--glass-edge-hi);
}
.menu__markets .geo__opt[aria-current]::after { content: none; }
.menu__foot { display: grid; gap: var(--s4); padding-top: var(--s6); }
.menu__helpline {
display: grid;
justify-items: start;
gap: 2px;
padding: 14px 18px 16px;
border-radius: var(--r-lg);
background: var(--panel);
border: 1px solid var(--line);
}
.menu__help-name { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 700; }
.menu__help-name svg { color: var(--g); }
.menu__phone {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-display);
font-synthesis: none;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -.006em;
font-variant-numeric: tabular-nums lining-nums;
color: var(--ink);
text-decoration: none;
}
.menu__meta { font-size: var(--fs-xs); color: var(--ink-2); }
.menu__age { align-items: center; max-width: none; }
.menu__age .rg-line__text { font-size: var(--fs-sm); color: var(--ink-2); }
.menu__age .menu__age-more { display: block; }
.menu__age .link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -12px; }
.menu-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1;
background: rgba(4,5,8,.74);
opacity: 0;
visibility: hidden;
touch-action: none;
transition: opacity calc(180ms * var(--motion)) var(--ease), visibility 0s linear calc(180ms * var(--motion));
}
.site-header > .header__nav-row:popover-open ~ .menu-scrim {
opacity: 1;
visibility: visible;
transition: opacity calc(240ms * var(--motion)) var(--ease-out), visibility 0s;
}
}
@media (max-width: 374px) and (scripting: enabled) {
.menu__markets .geo__opt { gap: var(--s2); padding-inline: 10px; }
.menu__markets .geo__opt-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
}
@media (max-width: 1023.98px) and (scripting: enabled) and (hover: hover) and (pointer: fine) {
@supports selector(:popover-open) {
.menu__btn:hover { border-color: var(--ink-2); color: #FFF; }
.site-nav__link:hover::after { color: var(--b); transform: translateX(3px) rotate(45deg); }
.menu__help-link:hover { color: #FFF; border-color: var(--ink-2); }
.menu__phone:hover { color: #FFF; text-decoration: underline; text-underline-offset: 5px; }
}
}
@media (min-width: 600.02px) and (max-width: 1023.98px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header > .header__nav-row { width: 26rem; }
}
}
@media (max-width: 600px) and (scripting: enabled) {
@supports selector(:popover-open) {
.menu-toggle { width: 44px; padding: 0; }
.menu-toggle__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
}
@media (max-width: 359.98px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header > .header__end,
.menu-toggle { margin-left: var(--s2); }
}
}
@media (max-width: 600px) and (scripting: enabled) {
@supports selector(:popover-open) {
.header__end { gap: 6px; }
.site-header > .header__end,
.menu-toggle { margin-left: 6px; }
.header__end .signin { padding-inline: 5px; margin-inline: -5px; }
.site-header .geo .geo__btn { width: 44px; padding: 0; gap: 1px; }
.geo__globe { display: none; }
.geo__panel {
top: calc(100% + 20px);
right: auto;
left: 50%;
width: min(17.5rem, calc(100vw - 2 * var(--gutter)));
transform: translateX(-50%);
}
}
}
@media (max-width: 400px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header .brand__name { font-size: .9375rem; }
.header__end .btn--sm { padding-inline: 12px; }
}
}
@media (max-width: 370px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header .brand { gap: 6px; }
.site-header .brand__mark { width: 26px; height: 26px; }
.site-header .brand__name { font-size: .8125rem; }
.header__end .btn--sm { padding-inline: 10px; }
}
}
@media (max-width: 359.98px) and (scripting: enabled) {
@supports selector(:popover-open) {
.site-header .geo { display: none; }
.menu__markets { grid-template-columns: minmax(0, 1fr); }
}
}
@media (prefers-reduced-motion: reduce) {
.site-header > .header__nav-row { transform: none; }
}
:root[data-motion="off"] .site-header > .header__nav-row { transform: none; }
@media (max-width: 1023.98px) and (forced-colors: active) {
.site-nav__link[aria-current],
.site-nav__sub .chip[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
@media (max-width: 768px) {
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
row-gap: 6px;
}
.site-header > .brand { flex: 1 1 auto; min-width: 0; order: 1; }
.site-header > .header__end { flex: 0 1 auto; min-width: 0; order: 2; }
.site-header > .menu-toggle { flex: none; order: 3; margin-left: auto; }
.site-header > .header__nav-row { flex: 1 1 100%; order: 4; }
.brand__name { min-width: 0; overflow-wrap: anywhere; }
.tile { overflow: visible; }
.tile__meta { white-space: normal; }
}
.to-toc {
position: fixed;
z-index: 3;
right: var(--gutter);
bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 16px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
background: rgba(13,14,18,.86);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 10px 28px -14px rgba(0,0,0,.9);
color: var(--ink);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--d-hover) var(--ease), transform var(--d-hover) var(--ease), visibility 0s linear var(--d-hover);
}
.to-toc--on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-toc:active { background-color: var(--panel-2); }
.to-toc svg { flex: none; color: var(--ink-2); }
.doc__toc .label { scroll-margin-top: var(--s5); }
@media (min-width: 980px) {
.to-toc { display: none; }
}