/* WestAce Casino – template v2 (reference: westace.com – dark brown stb theme, top navigation with dropdown tiles, green CTA, orange accents, Fira Sans Condensed) */
@font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-400-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-400-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-500-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-500-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-700-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-700-normal.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: "Fira Sans Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-700-italic.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: "Fira Sans Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-700-italic.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: "Fira Sans Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-800-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-800-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-900-normal.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: "Fira Sans Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-900-normal.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: "Fira Sans Condensed"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-ext-900-italic.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: "Fira Sans Condensed"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/fira-sans-condensed-latin-900-italic.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; }

:root {
  /* palette (westace.com --stb-* tokens, rgb triplets) */
  --n50: 255 241 230; --n100: 244 234 224; --n125: 255 225 200; --n150: 231 211 193; --n200: 195 169 165; --n300: 199 146 112; --n400: 188 120 82; --n500: 145 81 61; --n600: 108 78 64; --n700: 96 56 47; --n750: 82 48 40; --n800: 59 32 27; --n850: 44 36 33; --n900: 38 21 16; --n950: 26 14 11; --n960: 20 10 8; --n1000: 10 5 3;
  --br50: 255 235 198; --br100: 255 212 136; --br150: 255 213 99; --br160: 255 176 54; --br200: 255 157 32; --br300: 249 121 7; --br400: 221 84 2; --br500: 148 40 11; --br600: 70 15 2; --br700: 51 15 5; --br800: 38 11 3; --br900: 25 7 2; --br950: 19 6 2;
  --ac50: 235 255 229; --ac150: 177 255 154; --ac200: 71 255 69; --ac300: 4 255 0; --ac400: 14 211 9; --ac500: 19 174 13; --ac600: 3 139 2; --ac800: 2 73 1; --ac900: 1 39 0; --ac950: 1 17 1;
  --y150: 253 229 171; --y200: 251 208 110; --y300: 247 192 64; --y400: 243 178 27; --y500: 194 139 12; --y700: 132 96 11; --y800: 78 57 8;
  --g600: 102 160 28; --g950: 30 49 7; --red600: 221 60 98; --add400: 229 24 24; --blue600: 60 129 221; --blue950: 10 26 46;
  --white: 255 255 255; --black: 0 0 0;
  --text: rgb(var(--n150)); --text-2: rgb(var(--n300)); --text-3: rgb(var(--n200)); --accent: rgb(var(--br150)); --link: rgb(var(--n200));
  --bg: rgb(var(--n1000)); --bg-2: rgb(var(--n950)); --bg-3: rgb(var(--n900)); --bg-c1: rgb(var(--n800));
  --font: "Fira Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --tshadow: 0 2px 0 rgb(var(--black)), 0 1px 5px rgb(var(--black) / .25);
  --grad-15: linear-gradient(rgb(var(--n1000)), rgb(var(--n800)));
  --grad-25: linear-gradient(rgb(var(--n1000)), rgb(var(--n950)));
  --grad-50: linear-gradient(rgb(var(--n1000)), rgb(var(--n960)));
  --grad-60: linear-gradient(rgb(var(--n1000)), rgb(var(--n900)));
  --grad-80: linear-gradient(rgb(var(--n750)), rgb(var(--n900)));
  --grad-100: linear-gradient(rgb(var(--white)) 40%, rgb(var(--ac150)));
  --grad-150: linear-gradient(rgb(var(--white)) 40%, rgb(var(--n200)));
  --grad-210: linear-gradient(rgb(var(--y150)), rgb(var(--y500)));
  --grad-230: linear-gradient(rgb(var(--br200)), rgb(var(--br150)));
  --grad-325: linear-gradient(rgb(var(--n800)) 7%, rgb(var(--n600)));
  --grad-350: linear-gradient(rgb(var(--n300)), rgb(var(--n600)));
  --grad-440: linear-gradient(rgb(var(--n900)), rgb(var(--br950)));
  --grad-800: linear-gradient(rgb(var(--n900)) 0%, rgb(var(--n750)) 100%);
  --label-new: linear-gradient(rgb(var(--y400)), rgb(var(--add400)));
  --label-new-border: linear-gradient(rgb(var(--br160)), rgb(var(--br400)));
  --label-casino: linear-gradient(rgb(var(--g600)), rgb(var(--g950)));
  --label-sport: linear-gradient(rgb(var(--blue600)), rgb(var(--blue950)));
  --live-grad: linear-gradient(rgb(var(--ac800)), rgb(var(--ac950)));
  --stroke-grad: linear-gradient(rgb(var(--white) / .4), rgb(var(--white) / 0) 15%, rgb(var(--black) / 0) 85%, rgb(var(--black) / .4));
  --tab-shadow: 0 0 0 1px var(--bg) inset, 0 0 0 2px rgb(var(--n950)) inset;
  /* layout */
  --hdr-h: 64px; --nav-h: 33px; --pad: 16px;
  --cols: 8; --cols-rank: 7; --cols-wide: 5; --cols-grid: 11; --cols-promo: 5; --cols-sport: 7;
  --gap: 12px; --gap-rank: 9px; --rank-shift: 54px; --row-gap: 16px;
  --tile-r: 12px; --tile-sp: 2px;
  /* legacy aliases for shared parts */
  --gold: var(--accent); --muted: var(--text-2); --radius: 8px; --radius-sm: 4px; --shadow: 0 8px 16px rgb(var(--black) / .8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; min-width: 360px; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.4; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--text); text-decoration: none; }
a:hover { color: rgb(var(--br100)); }
button { font-family: inherit; }
h1, h2, h3, h4, .plate-shelf__title, .page-reward__title, .colophon__col-title { margin: 0; line-height: 1.2; font-family: var(--font); font-weight: 900; color: var(--text); }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[role="button"] { cursor: pointer; user-select: none; }
.reader-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.binding-seal { text-shadow: var(--tshadow); }

/* ---------- Buttons (stb system: 3-slice webp backgrounds left/center/right; Fira 800 uppercase; gradient-clipped text) ---------- */
.quill-btn { --bl: url("/images/ui/sec-l.webp"); --bc: url("/images/ui/sec-c.webp"); --br: url("/images/ui/sec-r.webp"); --bs: 18px; --shift: .06em; --mh: 48px; --fs: 18px; --px: 24px; --rad: 10px; --hin: 4px; --hrad: 7px; --tg: var(--grad-150); --hbg: rgb(var(--white)); --hop: .6; --hblend: overlay; --abg: rgb(var(--black)); --aop: .3;
  position: relative; z-index: 1; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: var(--mh); padding: 0 var(--px); border: 0; border-radius: var(--rad); font-family: var(--font); font-weight: 800; font-size: var(--fs); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap; color: #fff; background-color: transparent; background-image: var(--bc), var(--bl), var(--br); background-position: center, left center, right center; background-size: calc(100% - (var(--bs) * 2 - var(--shift))) 100%, var(--bs) 100%, var(--bs) 100%; background-repeat: no-repeat; cursor: pointer; transition: box-shadow .2s; }
.quill-btn::before, .quill-btn::after { content: ""; position: absolute; inset: var(--hin); z-index: -1; border-radius: var(--hrad); opacity: 0; transition: opacity .2s; pointer-events: none; }
.quill-btn::before { background: var(--hbg); mix-blend-mode: var(--hblend); }
.quill-btn::after { background: var(--abg); mix-blend-mode: multiply; }
.quill-btn:hover { color: #fff; box-shadow: 0 0 10px rgb(var(--n300) / .6); }
.quill-btn:hover::before { opacity: var(--hop); }
.quill-btn:active { box-shadow: none; }
.quill-btn:active::before { opacity: 0; }
.quill-btn:active::after { opacity: var(--aop); }
.quill-btn__t { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; background: var(--tg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px rgb(var(--black))); }
.quill-btn svg, .quill-btn img { position: relative; z-index: 1; flex: 0 0 auto; }
.quill-btn__ico { display: inline-flex; width: 24px; height: 24px; }
/* palettes */
.quill-btn--cloth { --bl: url("/images/ui/sec-l.webp"); --bc: url("/images/ui/sec-c.webp"); --br: url("/images/ui/sec-r.webp"); --hop: .6; --aop: .3; }
.quill-btn--paper { --bl: url("/images/ui/ter-l.webp"); --bc: url("/images/ui/ter-c.webp"); --br: url("/images/ui/ter-r.webp"); --hop: .35; --aop: .45; --hbg: rgb(var(--n700)); --hblend: normal; --abg: var(--bg); }
.quill-btn--gilt { --bl: url("/images/ui/psim-l.webp"); --bc: url("/images/ui/psim-c.webp"); --br: url("/images/ui/psim-r.webp"); --bs: 12px; --shift: 2px; --tg: var(--grad-100); --hop: .4; --aop: .4; --px: 45px; --hrad: 5px; }
.quill-btn--gilt:hover { box-shadow: 0 0 10px rgb(var(--br150) / .6); }
/* sizes */
.quill-btn--l { --bs: 30px; --mh: 80px; --fs: 28px; --px: 40px; --rad: 16px; --hin: 6px; --hrad: 12px; }
.quill-btn--m { --bs: 21px; --mh: 56px; --fs: 18px; --px: 24px; --rad: 11px; --hin: 4px; --hrad: 9px; }
.quill-btn--s { --bs: 18px; --mh: 48px; --fs: 18px; --px: 24px; --rad: 10px; --hin: 4px; --hrad: 7px; }
.quill-btn--xs { --bs: 14px; --mh: 36px; --fs: 14px; --px: 16px; --rad: 7px; --hin: 3px; --hrad: 5px; gap: 6px; min-width: 36px; }
.quill-btn--xxs { --bs: 14px; --mh: 36px; --fs: 12px; --px: 12px; --rad: 7px; --hin: 3px; --hrad: 5px; gap: 6px; min-width: 36px; }
.quill-btn--gilt.quill-btn--l, .quill-btn--gilt.quill-btn--m { --bl: url("/images/ui/prim-l.webp"); --bc: url("/images/ui/prim-c.webp"); --br: url("/images/ui/prim-r.webp"); --px: 45px; }
.quill-btn--gilt.quill-btn--l { --bs: 113px; --px: 80px; --hin: 12px 11px 14px; --rad: 19px; --hrad: 12px; padding-block: 14px 18px; }
.quill-btn--gilt.quill-btn--m { --bs: 71px; --hin: 8px 7px 10px; --rad: 13px; --hrad: 8px; padding-block: 14px 18px; }
.quill-btn--gilt.quill-btn--s { --bs: 12px; --px: 45px; }
.quill-btn--gilt.quill-btn--xs, .quill-btn--gilt.quill-btn--xxs { --bs: 9px; --px: 16px; }
.quill-btn__arrows { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.quill-btn__arrows::before, .quill-btn__arrows::after { content: ""; position: absolute; top: 10px; bottom: 12px; width: 63px; background-position: center; background-size: contain; background-repeat: no-repeat; mix-blend-mode: overlay; }
.quill-btn__arrows::before { left: 11px; background-image: url("/images/ui/arrows-l.svg"); }
.quill-btn__arrows::after { right: 11px; background-image: url("/images/ui/arrows-r.svg"); }
.quill-btn--l .quill-btn__arrows::before, .quill-btn--l .quill-btn__arrows::after { top: 12px; bottom: 18px; width: 90px; }
.quill-btn--l .quill-btn__arrows::before { left: 15px; }
.quill-btn--l .quill-btn__arrows::after { right: 15px; }
.quill-btn--wide { width: 100%; }
/* main-banner CTA (stb .button--cta.button--primary.button--l): green plate with gold frame – 3 slices 113px (cta-*.webp 452x320 → 80px tall,
   plate 71px visible) + hover/active texture layers; element 318x80, font 28, padding 14/18 like the original.
   Decor (all on one 7s clock, delay 1.5s, exactly like stb): .quill-btn__anim – animated dotted chevrons (primary-arrows svg, overlay blend),
   .quill-btn__shine – diagonal white sweep masked by the plate silhouette (cta-mask-*), .quill-btn__shadow – drop shadow + yellow glow pulse, button-scale 1.035 */
.quill-btn--feature { --bl: url("/images/ui/cta-l.webp"); --bc: url("/images/ui/cta-c.webp"); --br: url("/images/ui/cta-r.webp"); --bs: 113px; --shift: 2px; --mh: 80px; --fs: 28px; --px: 80px; --rad: 19px; --hin: 0; --hrad: 12px; --tg: var(--grad-100); --hop: 1; --aop: 1; --hblend: normal;
  --ai: 15px; --at: 12px; --ab: 18px; --aw: 110px; --si: 4px 5px; --sr: 16px; --cta-sh: 0 5px 5px 0 rgb(var(--black) / .25);
  min-width: 318px; padding-block: 14px 18px; box-shadow: none; animation: button-scale 7s ease-in-out 1.5s infinite; }
.quill-btn--feature::before, .quill-btn--feature::after { background-color: transparent; background-position: center, left center, right center; background-size: calc(100% - (var(--bs) * 2 - var(--shift))) 100%, var(--bs) 100%, var(--bs) 100%; background-repeat: no-repeat; mix-blend-mode: normal; }
.quill-btn--feature::before { background-image: url("/images/ui/cta-c-h.webp"), url("/images/ui/cta-l-h.webp"), url("/images/ui/cta-r-h.webp"); }
.quill-btn--feature::after { background-image: url("/images/ui/cta-c-a.webp"), url("/images/ui/cta-l-a.webp"), url("/images/ui/cta-r-a.webp"); }
.quill-btn--feature:hover { box-shadow: none; }
.quill-btn--feature:hover .quill-btn__t { transform: translateY(-1px); }
.quill-btn--feature:active .quill-btn__t { transform: translateY(1px); }
.quill-btn--feature .quill-btn__t { transition: transform .2s; }
/* size m of the CTA (stb .button--cta.button--m: 56px, slices 71px, font 18, min-width 318 on desktop) */
.quill-btn--feature.quill-btn--m { --bs: 71px; --mh: 56px; --fs: 18px; --px: 45px; --rad: 13px; --hrad: 8px; --ai: 11px; --at: 10px; --ab: 12px; --aw: 58px; --si: 3px; --sr: 8px; min-width: 318px; }
/* animated dotted chevrons: two items (left/right), each with 2 layers (::before current, ::after incoming) */
.quill-btn__anim { position: absolute; left: var(--ai); right: var(--ai); top: var(--at); bottom: var(--ab); overflow: hidden; mix-blend-mode: overlay; pointer-events: none; }
.quill-btn__anim-i { position: absolute; top: 0; bottom: 0; z-index: -1; width: var(--aw); }
.quill-btn__anim-i::before, .quill-btn__anim-i::after { content: ""; position: absolute; inset: 0; background-image: var(--au); background-position: var(--ap, 50%) 50%; background-size: contain; background-repeat: no-repeat; animation-duration: 7s; animation-timing-function: linear; animation-delay: 1.5s; animation-iteration-count: infinite; will-change: transform; }
.quill-btn__anim-i--l { --ap: 0; --au: url("/images/ui/arrows-l.svg"); left: 0; }
.quill-btn__anim-i--l::before { animation-name: arrow-left-1-move; }
.quill-btn__anim-i--l::after { transform: translate3d(-100%, 0, 0); animation-name: arrow-left-2-move; }
.quill-btn__anim-i--r { --ap: 100%; --au: url("/images/ui/arrows-r.svg"); right: 0; }
.quill-btn__anim-i--r::before { animation-name: arrow-right-1-move; }
.quill-btn__anim-i--r::after { transform: translate3d(100%, 0, 0); animation-name: arrow-right-2-move; }
/* diagonal shine sweep, clipped to the plate by the mask slices */
.quill-btn__shine { position: absolute; inset: 0; z-index: 1; container-type: inline-size; pointer-events: none; -webkit-mask-image: url("/images/ui/cta-mask-c.webp"), url("/images/ui/cta-mask-l.webp"), url("/images/ui/cta-mask-r.webp"); mask-image: url("/images/ui/cta-mask-c.webp"), url("/images/ui/cta-mask-l.webp"), url("/images/ui/cta-mask-r.webp"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center, left center, right center; mask-position: center, left center, right center; -webkit-mask-size: calc(100% - (var(--bs) * 2 - var(--shift))) 100%, var(--bs) 100%, var(--bs) 100%; mask-size: calc(100% - (var(--bs) * 2 - var(--shift))) 100%, var(--bs) 100%, var(--bs) 100%; }
.quill-btn__shine::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 170%; background: linear-gradient(90deg, transparent 0%, rgb(var(--white)) 50%, transparent 100%); transform: translateX(-5cqw) translateX(-100%) translateY(-25%) rotate(-35deg); animation: shine-move 7s linear infinite 1.5s; }
/* drop shadow / glow carrier (inset to the plate) */
.quill-btn__shadow { position: absolute; inset: var(--si); border-radius: var(--sr); pointer-events: none; }
.quill-btn__shadow::before, .quill-btn__shadow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.quill-btn__shadow::before { box-shadow: var(--cta-sh); animation: cta-glow-rest 7s linear 1.5s infinite; }
.quill-btn__shadow::after { box-shadow: 0 0 25px 0 rgb(var(--y300) / 1); opacity: 0; animation: cta-glow-lit 7s linear 1.5s infinite; }
/* stb animates the shadow through an (unregistered) custom property → it flips discretely at 3% / 28% and the .2s transition smooths it;
   here the same result is keyframed directly on the shadow element (inherited animated custom properties update late in Chromium) */
@keyframes button-scale { 0% { transform: scale(1); } 6% { transform: scale(1.035); } 25% { transform: scale(1.035); } 31% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes cta-glow-rest { 0%, 3% { opacity: 1; } 6%, 28% { opacity: 0; } 31%, 100% { opacity: 1; } }
@keyframes cta-glow-lit { 0%, 3% { opacity: 0; } 6%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes shine-move { 0%, 9% { transform: translateX(-5cqw) translateX(-100%) translateY(-25%) rotate(-35deg); opacity: 0; } 10%, 18% { opacity: 1; } 19%, 100% { transform: translateX(120cqw) translateX(-100%) translateY(-25%) rotate(-35deg); opacity: 0; } }
@keyframes arrow-left-1-move { 0% { opacity: 1; transform: translateZ(0) scale(1); } 5% { opacity: 1; transform: translate3d(-10px, 0, 0) scaleX(.8); } 6% { opacity: 1; } 7% { opacity: .55; } 13% { opacity: 0; transform: translate3d(110%, 0, 0) scale(2); } 15% { transform: translate3d(-100%, 0, 0) scale(1); } 20% { opacity: 1; transform: translate3d(-100%, 0, 0) scale(1); } 22% { opacity: 1; transform: translate3d(8px, 0, 0) scale(1); } 25%, 56% { opacity: 1; transform: translateZ(0) scale(1); } 57%, 100% { opacity: 1; transform: translateZ(0) scale(1); } }
@keyframes arrow-left-2-move { 0%, 9% { opacity: 1; transform: translate3d(-100%, 0, 0) scale(1); } 11% { opacity: 1; transform: translate3d(8px, 0, 0) scale(1); } 13% { opacity: 1; transform: translate3d(-10px, 0, 0) scaleX(.8); } 15% { opacity: 1; transform: translate3d(-10px, 0, 0) scaleX(.8); } 20% { opacity: .55; } 24% { opacity: 0; transform: translate3d(110%, 0, 0) scale(2); } 25%, 86% { opacity: 0; transform: translate3d(-100%, 0, 0) scale(1); } }
@keyframes arrow-right-1-move { 0% { opacity: 1; transform: translateZ(0) scale(1); } 5% { opacity: 1; transform: translate3d(10px, 0, 0) scaleX(.8); } 6% { opacity: 1; } 7% { opacity: .55; } 13% { opacity: 0; transform: translate3d(-110%, 0, 0) scale(2); } 15% { transform: translate3d(100%, 0, 0) scale(1); } 20% { opacity: 1; transform: translate3d(100%, 0, 0) scale(1); } 22% { opacity: 1; transform: translate3d(-8px, 0, 0) scale(1); } 25%, 56% { opacity: 1; transform: translateZ(0) scale(1); } 57%, 100% { opacity: 1; transform: translateZ(0) scale(1); } }
@keyframes arrow-right-2-move { 0%, 9% { opacity: 1; transform: translate3d(100%, 0, 0) scale(1); } 11% { opacity: 1; transform: translate3d(-8px, 0, 0) scale(1); } 13% { opacity: 1; transform: translate3d(10px, 0, 0) scaleX(.8); } 14% { opacity: 1; transform: translate3d(10px, 0, 0) scaleX(.8); } 20% { opacity: .55; } 24% { opacity: 0; transform: translate3d(-110%, 0, 0) scale(2); } 25%, 86% { opacity: 0; transform: translate3d(100%, 0, 0) scale(1); } }
/* tabs/pills (category / provider / lang) */
.spine-tab { position: relative; z-index: 1; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 4px; min-height: 32px; padding: 5px 7px; border: 1px solid rgb(var(--n800)); border-radius: 4px; font-size: 14px; font-weight: 500; text-transform: uppercase; white-space: nowrap; color: var(--text-2); background: var(--grad-60); box-shadow: var(--tab-shadow); cursor: pointer; transition: color .2s, border-color .2s; }
.spine-tab:hover { color: var(--text); border-color: rgb(var(--n700)); }

/* ---------- Header (64px gradient-50, logo 125x42, search 300x48, log in / register) + nav bar (32px, 14px links with underline on hover, dropdown tiles) ---------- */
.title-masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.title-masthead__inner { position: relative; display: flex; align-items: center; gap: 8px; height: var(--hdr-h); padding: 8px 20px 8px 28px; background: var(--grad-50); }
.index-toggle { display: none; }
.imprint-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.imprint-logo img { width: 125px; height: 42px; }
.title-masthead__spacer { flex: 1 1 auto; }
.catalogue-search { position: relative; display: flex; align-items: center; gap: 8px; width: 300px; height: 48px; padding: 0 15px; border: 1px solid var(--bg-3); border-radius: 8px; color: var(--text-2); font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.2; background: var(--bg-3); box-shadow: 0 3px 3px rgb(var(--n1000)), 0 1px 1px rgb(var(--black) / .4), 0 -4px 2px rgb(var(--white) / .05) inset; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background-color .2s; }
.catalogue-search:hover { background-color: var(--bg-c1); }
.catalogue-search > * { position: relative; z-index: 1; }
.catalogue-search svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-2); }
.catalogue-search__ico { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; -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.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%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.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.title-masthead__actions { display: flex; align-items: center; gap: 8px; }
.title-masthead__actions .quill-btn { --px: 24px; }
.title-masthead__login-m, .title-masthead__reg-m { display: none; }
/* nav bar */
.index-nav { display: flex; justify-content: space-between; width: 100%; height: var(--nav-h); padding: 0 20px; border-top: 1px solid var(--bg-3); border-bottom: 1px solid var(--bg-c1); background: var(--bg); }
.index-nav__list { display: flex; align-items: center; gap: 4px; }
.index-nav__item { position: relative; }
.index-nav__link { position: relative; display: block; height: 32px; padding: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--link); cursor: pointer; transition: color .2s; }
.index-nav__link > span { position: relative; display: inline-block; }
.index-nav__link > span::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; border-radius: 4px 4px 0 0; background: rgb(var(--br100)); opacity: 0; transition: opacity .2s; }
.index-nav__item:hover .index-nav__link { color: rgb(var(--br100)); }
.index-nav__item:hover .index-nav__link > span::after { opacity: 1; }
.index-nav__link.is-bookmarked { color: var(--accent); }
.index-nav__link.is-bookmarked > span::after { opacity: 1; background: rgb(var(--br150)); }
.index-nav__flag { display: flex; align-items: center; justify-content: center; }
.index-nav__flag img { width: 16px; height: 16px; border-radius: 2px; object-fit: cover; }
/* dropdown (desktop hover): full-width dark strip with 100x100 tiles */
.index-nav__drop { position: fixed; top: calc(var(--hdr-h) + var(--nav-h)); left: 0; right: 0; z-index: 70; display: flex; justify-content: center; gap: 12px; padding: 12px; border-radius: 0 0 8px 8px; background: var(--grad-25); box-shadow: 0 2px 4px rgb(var(--black) / .4); opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility .1s; }
.index-nav__item:hover .index-nav__drop { opacity: 1; visibility: visible; }
.perch-tile { position: relative; z-index: 1; display: flex; flex: 0 0 100px; flex-direction: column; justify-content: center; align-items: center; gap: 2px; height: 100px; padding: 6px 4px 7px; border: 1px solid rgb(var(--n800)); border-radius: 8px; color: var(--text-2); background: var(--grad-60); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset, 0 0 0 2px rgb(var(--n950)) inset; cursor: pointer; transition: scale .2s ease, color .2s; }
.perch-tile::before, .perch-tile::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 6px; transition: opacity .2s; pointer-events: none; }
.perch-tile::before { border: 1px solid rgb(var(--n950)); background: var(--grad-440); opacity: 0; }
.perch-tile::after { height: 45%; border: 1px solid rgb(var(--white)); border-bottom: 0; border-radius: 6px 6px 0 0; opacity: .2; -webkit-mask: linear-gradient(#fff, transparent); mask: linear-gradient(#fff, transparent); }
.perch-tile:hover { color: var(--accent); scale: 1.02; }
.perch-tile:hover::before { opacity: 1; }
.perch-tile:hover::after { opacity: .4; }
.perch-tile__icon { display: flex; justify-content: flex-end; align-items: flex-end; flex: 1 1 auto; }
.perch-tile__icon img { width: 40px; height: 40px; object-fit: contain; transform-origin: bottom; transition: transform .2s; }
.perch-tile:hover .perch-tile__icon img { transform: scale(1.18); }
.perch-tile__text { display: flex; align-items: center; justify-content: center; height: 28px; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.perch-tile--bg { justify-content: flex-start; }
.perch-tile--bg .perch-tile__text { position: relative; z-index: 1; }
.perch-tile__img { position: absolute; inset: 1px; z-index: -1; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 6px; object-fit: cover; }

/* ---------- Mobile category strip (sticky under the header) ---------- */
.index-tabs { display: none; }

/* ---------- Main ---------- */
.reading-room { padding-top: calc(var(--hdr-h) + var(--nav-h)); }
.binding-wrap { margin: 0; }
.folio-frame { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--pad); }
.folio-page { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--row-gap); padding: 16px 0 32px; }

/* ---------- Main banner (1920x500 frame: 1px stroke + 3px padding, 1912x492 media, text column on the left) ---------- */
.frontispiece { margin-top: 16px; }
.frontispiece .folio-frame { padding: 0; }
.frontis-carousel { --col: 680px; --hpad: 28px; position: relative; max-width: 1920px; margin: 0 auto; padding: 3px; border: 1px solid rgb(var(--n800)); border-radius: 12px; background: var(--bg); }
.frontis-carousel__track { position: relative; display: grid; overflow: hidden; border-radius: 10px; }
.frontis-slide { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: var(--col) 1fr; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.frontis-slide.is-bookmarked { opacity: 1; visibility: visible; z-index: 1; }
.frontis-slide__media { grid-area: 1 / 1 / -1 / -1; position: relative; overflow: hidden; }
.frontis-slide__media::before { content: ""; display: block; aspect-ratio: 1912 / 492; }
.frontis-slide__media picture, .frontis-slide__media img, .frontis-slide__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frontis-slide__media video { z-index: 1; background: var(--bg-2); }
.frontis-slide__inner { grid-area: 1 / 1; position: relative; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 32px; padding: 41px var(--hpad) 39px; text-align: center; }
.frontis-slide__inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--n1000)) 0%, rgb(var(--n1000) / .4) 75%, transparent 100%); pointer-events: none; }
.frontis-slide__card { position: relative; display: grid; gap: 16px; justify-items: center; }
.frontis-slide__label { position: relative; display: inline-flex; justify-content: center; align-items: center; min-height: 18px; padding: 0 10px; border-style: solid; border-width: 0; border-image-source: url("/images/ui/title-decor.webp"); border-image-slice: 18 60 fill; border-image-width: 9px 30px; font-size: 14px; font-weight: 700; line-height: 1.2; text-shadow: 0 0 3px rgb(var(--white) / .7); text-transform: uppercase; color: rgb(var(--n900)); filter: drop-shadow(0 2px 2px rgb(var(--black) / .25)); }
.frontis-slide__title { --fs: 48px; position: relative; max-width: 560px; font-size: var(--fs); font-weight: 900; font-style: italic; line-height: 1; text-align: center; text-transform: uppercase; text-wrap: balance; text-shadow: var(--tshadow); color: #fff; }
.frontis-slide__action { position: relative; display: grid; gap: 8px; justify-items: center; }
.frontis-carousel__nav { position: absolute; left: 16px; right: 16px; top: 50%; z-index: 3; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.frontis-carousel__arrow { pointer-events: auto; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--text); background: transparent; filter: drop-shadow(0 1px rgb(var(--black))); cursor: pointer; transition: color .2s; }
.frontis-carousel__arrow:hover { color: var(--accent); }
.frontis-carousel__arrow svg { width: 24px; height: 24px; }
.frontis-carousel__dots { position: absolute; left: 0; bottom: 34px; z-index: 3; display: flex; justify-content: center; align-items: center; width: var(--col); pointer-events: none; }
.frontis-carousel__dot { position: relative; display: flex; padding: 8px 5px; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.frontis-carousel__dot::before, .frontis-carousel__dot::after { content: ""; display: block; width: 15px; height: 4px; background: url("/images/ui/dot.webp") center / contain no-repeat; filter: drop-shadow(0 1px 0 rgb(var(--black))); transition: opacity .2s; }
.frontis-carousel__dot::after { position: absolute; inset: 0; margin: auto; background-image: url("/images/ui/dot-active.webp"); opacity: 0; }
.frontis-carousel__dot:hover::before { opacity: .7; }
.frontis-carousel__dot.is-bookmarked::after { opacity: 1; }

/* ---------- Rows ---------- */
.plate-shelf { position: relative; min-width: 0; }
.plate-shelf--games + .plate-shelf--games { margin-top: var(--row-gap); }
.plate-shelf__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 10px; }
.plate-shelf__title { display: flex; align-items: center; min-height: 20px; font-size: 20px; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; color: var(--text); }
.plate-shelf__divider { display: none; }
.plate-shelf__more { display: flex; align-items: center; gap: 8px; justify-self: end; }
.plate-shelf__link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text); cursor: pointer; white-space: nowrap; transition: color .2s; }
.plate-shelf__link:hover { color: var(--accent); }
.plate-shelf__link svg { display: none; width: 16px; height: 16px; }
.plate-shelf__arrows { display: flex; gap: 8px; }
.plate-shelf__arrow { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; padding: 0; border: 0; color: var(--text); background: transparent; filter: drop-shadow(0 1px rgb(var(--black))); cursor: pointer; transition: color .2s; }
.plate-shelf__arrow:hover { color: var(--accent); }
.plate-shelf__arrow:disabled { color: rgb(var(--n850)); cursor: default; }
.plate-shelf__arrow svg { width: 16px; height: 16px; }
.page-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 4px; margin: -10px -4px -10px; padding: 10px 4px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.page-scroll::-webkit-scrollbar { display: none; }
.page-scroll > * { scroll-snap-align: start; }
.page-scroll.is-on-the-wing { cursor: grabbing; scroll-snap-type: none; }
.page-scroll.is-on-the-wing > * { pointer-events: none; }
.page-scroll--ranked { --cols: var(--cols-rank); --gap: var(--gap-rank); margin-bottom: -22px; padding-bottom: 22px; }
.page-scroll--wide { --cols: var(--cols-wide); }

/* ---------- Game tile (thumbnail: 2px spacer + 1px outer stroke, inner gradient stroke, bottom fade; hover: blurred glitter + round play + Demo) ---------- */
.game-plate { position: relative; display: grid; aspect-ratio: 2 / 3; width: 100%; border: var(--tile-sp) solid var(--bg); border-radius: var(--tile-r); box-shadow: 0 0 0 1px rgb(var(--n800)); color: var(--text); background: var(--bg); isolation: isolate; }
.game-plate--wide { aspect-ratio: 3 / 2; }
.game-plate__pic { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; border-radius: calc(var(--tile-r) - var(--tile-sp)); background: var(--bg) url("/images/ui/picture-load.webp") center / 41px 45px no-repeat; }
.game-plate__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-plate__pic::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(rgb(var(--black) / 0) 77%, rgb(var(--black) / .6)); pointer-events: none; }
.game-plate__pic::after { content: ""; position: absolute; inset: 0; z-index: 2; padding: var(--tile-sp); border-radius: inherit; background: var(--stroke-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.game-plate__frame { display: none; }
.game-plate__badge { position: absolute; left: 50%; top: -6px; z-index: 4; display: flex; align-items: center; height: 18px; padding: 1px 7px; border: 1px solid transparent; border-radius: 30px; transform: translateX(-50%); font-size: 12px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 0 rgb(var(--black) / .7); text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--label-new) padding-box, var(--label-new-border) border-box; box-shadow: 0 1px 2px rgb(var(--black) / .7); transition: opacity .2s; pointer-events: none; }
.game-plate--wide .game-plate__badge { left: auto; right: 4px; top: 4px; transform: none; }
.game-plate__dnw { position: absolute; left: 0; top: 0; z-index: 4; width: 44px; height: 44px; border-top-left-radius: calc(var(--tile-r) - var(--tile-sp)); background: url("/images/ui/dropnwin.svg") center / contain no-repeat; pointer-events: none; }
.game-plate__jackpot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: center; min-height: 22px; padding: 1px 4px; border-top: 1px solid rgb(var(--n700)); border-radius: 0 0 calc(var(--tile-r) - var(--tile-sp)) calc(var(--tile-r) - var(--tile-sp)); font-size: 14px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; line-height: 1.4; text-align: center; text-shadow: 0 1px 0 rgb(var(--black) / .7); color: #fff; background: var(--label-new); transition: opacity .2s; pointer-events: none; }
/* live tables: results plate (green, overhangs the bottom by 7px), seats badge, bet range label centred on the bottom edge */
.game-plate__live { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; transition: opacity .2s; }
.game-plate__results { position: absolute; left: 0; right: 0; bottom: -7px; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, 20px); grid-template-rows: 20px; grid-auto-rows: 0; justify-content: center; align-content: start; gap: 0 4px; overflow: hidden; height: 42px; padding: 5px 10px 0; border-top: 1px solid rgb(var(--g950)); border-radius: 0 0 10px 10px; background: var(--live-grad); }
.game-plate__results span { display: flex; justify-content: center; align-items: center; overflow: hidden; width: 20px; height: 100%; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1.4; text-shadow: 0 1px 0 rgb(var(--black) / .7); color: #fff; background: rgb(var(--black)); }
.game-plate__results span.is-red-plumage { background: #c7102e; }
.game-plate__results span.is-green-plumage { background: #0f9d3a; }
.game-plate__results span:nth-child(n+8) { display: none; }
.game-plate--wide .game-plate__results span:nth-child(n+8) { display: flex; }
.game-plate--wide .game-plate__results span:nth-child(n+14) { display: none; }
.game-plate__seats { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 23px; margin-bottom: 8px; padding: 2px 6px; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 0 rgb(var(--black) / .7); color: #fff; background: var(--grad-80); }
.game-plate__seats::before { content: ""; display: inline-block; width: 16px; height: 16px; background: rgb(var(--g600)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 20c0-4 3-7 7-7s7 3 7 7z'/%3E%3Ccircle cx='17' cy='8' r='3'/%3E%3Cpath d='M15 13.3c3 .4 6 2.9 6 6.7h-4.2c0-2.6-.7-4.9-1.8-6.7z'/%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='%23000'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 20c0-4 3-7 7-7s7 3 7 7z'/%3E%3Ccircle cx='17' cy='8' r='3'/%3E%3Cpath d='M15 13.3c3 .4 6 2.9 6 6.7h-4.2c0-2.6-.7-4.9-1.8-6.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.game-plate__seats.is-nest-full::before { background: rgb(var(--red600)); }
.game-plate__limits { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; height: 21px; max-width: calc(100% - 8px); margin: 0 4px -8px; padding: 2px 3px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.4; text-shadow: 0 1px 0 rgb(var(--black) / .7); white-space: nowrap; color: #fff; background: var(--grad-325) padding-box, linear-gradient(rgb(var(--n500)) 7%, rgb(var(--n800))) border-box; }
/* hover */
.game-plate__hover { position: absolute; inset: 0; z-index: 5; display: grid; justify-content: center; align-content: end; justify-items: center; gap: 16px; padding-block: 20px; border-radius: calc(var(--tile-r) - var(--tile-sp)); opacity: 0; background: linear-gradient(rgb(var(--br160) / .2), rgb(var(--n1000) / .2)), radial-gradient(rgb(var(--n1000) / 0), rgb(var(--n1000) / .8) 65%, rgb(var(--n1000))); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity .2s; pointer-events: none; }
.game-plate__hover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .3; pointer-events: none; }
.game-plate__hover::after { content: ""; position: absolute; inset: 0; padding: var(--tile-sp); border-radius: inherit; background: var(--grad-210); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.game-plate__play { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; justify-content: center; align-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgb(var(--n1000) / .6) url("/images/ui/play.webp") center / contain no-repeat; transform: translate(-50%, -50%); pointer-events: all; }
.game-plate__play::before { content: ""; position: absolute; inset: 4px 5px 6px; width: 62px; height: 62px; border-radius: 50%; opacity: 0; background: #fff; mix-blend-mode: overlay; transition: opacity .2s; }
.game-plate__play:hover::before { opacity: .4; }
.game-plate__play svg { position: relative; z-index: 1; width: 32px; height: 32px; margin-left: 4px; color: #fff; filter: drop-shadow(0 1px 1px rgb(var(--black) / .6)); }
.game-plate__demo { position: relative; z-index: 1; font-size: 14px; font-weight: 700; line-height: 1.4; color: #fff; pointer-events: all; }
.game-plate__demo:hover { color: var(--accent); }
.game-plate__name, .game-plate__provider { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .game-plate:hover .game-plate__hover { opacity: 1; pointer-events: auto; }
  .game-plate:hover .game-plate__hover::before { background: url("/images/ui/hover-anim.webp") center / cover no-repeat; }
  .game-plate:hover .game-plate__badge, .game-plate:hover .game-plate__jackpot, .game-plate:hover .game-plate__live, .game-plate:hover .game-plate__dnw { opacity: 0; }
}
/* ranked row: big italic index behind the tile (stroked orange, dark gradient fill) */
.numbered-plate { position: relative; display: block; padding-left: var(--rank-shift); }
.plate-number { position: absolute; left: 0; bottom: 0; z-index: 0; display: block; margin-left: calc(var(--rank-shift) - 54px + 12px); margin-bottom: -2px; font-size: 96px; font-weight: 700; font-style: italic; line-height: .85; letter-spacing: -19px; color: transparent; -webkit-text-stroke: 2px rgb(var(--br160)); paint-order: stroke fill; background: var(--grad-15); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 4px rgb(var(--black) / .5)); pointer-events: none; }
.numbered-plate:first-child .plate-number { margin-left: calc(var(--rank-shift) - 54px + 12px); }
.plate-number--small { letter-spacing: -22px; margin-left: calc(var(--rank-shift) - 54px - 4px); }
.numbered-plate .game-plate { position: relative; z-index: 1; }

/* ---------- Providers (2 rows x 10 dark bevel tiles: icon 28 + name) ---------- */
.publisher-plates__grid { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 9px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: -2px; padding: 2px; }
.publisher-plates__grid::-webkit-scrollbar { display: none; }
.publisher-plate { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; width: 100%; aspect-ratio: 96 / 78; padding: 24.2% 4px 0; border: 1px solid rgb(var(--n800)); border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; color: var(--text-2); background: var(--bg); transition: color .2s, scale .2s; cursor: pointer; }
.publisher-plate::before { content: ""; position: absolute; inset: 1px; z-index: -1; border: 1px solid rgb(var(--n950)); border-radius: 7px; background: var(--grad-60); }
.publisher-plate::after { content: ""; position: absolute; inset: 1px; z-index: -1; padding: 1px; border-radius: 7px; background: var(--stroke-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.publisher-plate__hover { position: absolute; inset: 0; z-index: -1; border: 1px solid rgb(var(--n950)); border-radius: 7px; background: var(--grad-440); opacity: 0; transition: opacity .2s; }
.publisher-plate:hover { color: var(--accent); scale: 1.025; }
.publisher-plate:hover .publisher-plate__hover { opacity: 1; }
.publisher-plate__logo { width: 28px; height: 28px; object-fit: contain; transform-origin: bottom; transition: scale .2s; }
.publisher-plate:hover .publisher-plate__logo { scale: 1.2; }
.publisher-plate__name { display: block; margin-top: 21.3%; white-space: nowrap; }
.publisher-plate__meta { display: none; }
.publisher-plate--more .publisher-plate__logo { color: rgb(var(--n400)); }

/* ---------- Sport (featured phone card 2x2 + 1:1 category cards on a desert texture, 7 cols x 2 rows) ---------- */
.sport-plates__grid { --cols: var(--cols-sport); --sgap: 10px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--sgap); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: -2px; padding: 2px; }
.sport-plates__grid::-webkit-scrollbar { display: none; }
.sport-plate { position: relative; display: grid; overflow: hidden; aspect-ratio: 1; padding: 2px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.sport-plate::before, .sport-plate::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 12px; pointer-events: none; }
.sport-plate::before { border: 1px solid rgb(var(--n800)); }
.sport-plate::after { padding: 1px; background: var(--grad-210); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .2s; }
.sport-plate:hover::after { opacity: 1; }
.sport-plate__pic { grid-area: 1 / 1 / -1 / -1; position: relative; overflow: hidden; border-radius: 10px; }
.sport-plate__pic::before { content: ""; position: absolute; inset: 2px; z-index: 1; padding: 2px; border-radius: 10px 10px 0 0; background: linear-gradient(#fff 0%, rgb(var(--white) / 0) 15%, rgb(var(--black) / 0) 85%, #000 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .2; pointer-events: none; }
.sport-plate__pic img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; transition: transform .2s; }
.sport-plate:hover .sport-plate__pic img { transform: scale(1.05); }
.sport-plate__pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgb(var(--black) / 0) 80%, rgb(var(--black) / .6)); pointer-events: none; }
.sport-plate__name { grid-area: 1 / 1 / -1 / -1; z-index: 1; display: inline-flex; justify-content: center; align-items: center; align-self: end; min-height: 32px; padding: 2px 4px; font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: .02em; text-align: center; text-transform: uppercase; text-wrap: balance; color: rgb(var(--n200)); background: var(--grad-150); -webkit-background-clip: text; background-clip: text; transition: color .2s; }
.sport-plate:hover .sport-plate__name { color: var(--accent); }
.sport-plate--featured { grid-row: span 2; grid-column: span 2; aspect-ratio: auto; }
.sport-plate__bg { display: none; }
.sport-plate--featured .sport-plate__pic { border-radius: 11px; background: url("/images/ui/sport-bg.webp") center / cover no-repeat; }
.sport-plate--featured .sport-plate__pic::before { display: none; }
.sport-plate--featured .sport-plate__pic::after { display: none; }
.sport-plate--featured .sport-plate__pic img { position: absolute; top: 6px; left: 16px; width: auto; max-width: 100%; height: 100%; border-radius: 0; object-fit: contain; object-position: left top; transform-origin: left top; }
.sport-plate--featured:hover .sport-plate__pic img { transform: scale(1.03); }
.sport-plate__action { grid-area: 1 / 1 / -1 / -1; position: relative; z-index: 1; display: grid; align-self: end; justify-self: start; width: 100%; padding: 35px 17px 17px; }
.sport-plate__action::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 0 0 10px 10px; background: linear-gradient(transparent, rgb(var(--black))); pointer-events: none; }
.sport-plate__action .quill-btn { width: 100%; }

/* ---------- Rewards (2 wide + 3 narrow cards on the rewards texture, picture on the right) ---------- */
.prize-plates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.prize-plate { grid-column: span 2; position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 168px; padding: 20px 16px; border-radius: 12px; background: url("/images/ui/rewards-bg.webp") center / cover no-repeat; color: var(--text); cursor: pointer; }
.prize-plate:nth-child(1), .prize-plate:nth-child(2) { grid-column: span 3; }
.prize-plate::before, .prize-plate::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.prize-plate::before { border: 1px solid rgb(var(--n800)); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset; }
.prize-plate::after { padding: 1px; background: var(--grad-210); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .2s; }
.prize-plate:hover::after { opacity: 1; }
.prize-plate__wrap { display: contents; }
.prize-plate__img { position: absolute; right: 2px; bottom: 2px; height: calc(100% - 4px); width: auto; object-fit: cover; object-position: right center; transform-origin: left bottom; transition: scale .2s; }
.prize-plate:hover .prize-plate__img { scale: 1.07; }
.prize-plate__content { position: relative; z-index: 1; display: grid; row-gap: 4px; max-width: 52%; text-wrap: balance; }
.prize-plate__title { font-size: 20px; font-weight: 900; font-style: italic; line-height: 1; text-shadow: var(--tshadow); text-transform: uppercase; color: #fff; transition: color .2s; }
.prize-plate:hover .prize-plate__title { color: var(--accent); }
.prize-plate__desc { font-size: 14px; line-height: 1.4; color: var(--text); }

/* ---------- Promo cards (3:4 picture, tag, name, italic title, "read more" secondary button) ---------- */
.page-scroll--bonuses { --cols: var(--cols-promo); }
.page-reward { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; width: 100%; height: 100%; aspect-ratio: 3 / 4; padding: 1px; border-radius: 12px; background: var(--grad-80); cursor: pointer; }
.page-reward::after { content: ""; position: absolute; inset: 2px; height: 64px; border: 2px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; -webkit-mask: linear-gradient(rgb(var(--white) / .4), rgb(var(--white) / 0)); mask: linear-gradient(rgb(var(--white) / .4), rgb(var(--white) / 0)); pointer-events: none; }
.page-reward__wrap { display: contents; }
.page-reward__media { grid-area: 1 / 1 / -1 / -1; position: relative; overflow: hidden; border-radius: 11px; background: var(--bg-2); }
.page-reward__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1); transition: transform .2s; }
.page-reward:hover .page-reward__media img { transform: scale(1.06); }
.page-reward__media::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; opacity: 0; background: var(--grad-350); transition: opacity .2s; pointer-events: none; }
.page-reward:hover .page-reward__media::before { opacity: .15; }
.page-reward__tag { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; align-items: center; height: 22px; padding: 2px 7px; border: 1px solid rgb(var(--g600)); border-radius: 30px; font-size: 12px; font-weight: 700; line-height: 1.4; text-shadow: 0 1px 0 rgb(var(--black) / .7); color: #fff; background: var(--label-casino); box-shadow: 0 1px 2px rgb(var(--black) / .7); }
.page-reward__tag--sport { border-color: rgb(var(--blue600)); background: var(--label-sport); }
.page-reward__body { grid-area: 1 / 1 / -1 / -1; position: relative; z-index: 1; display: grid; align-content: space-between; align-self: end; gap: 12px; padding: 20px 12px 11px; border-radius: 0 0 11px 11px; background: linear-gradient(rgb(var(--n1000) / 0), rgb(var(--n1000) / .85) 30%, rgb(var(--n1000) / .95)); }
.page-reward__name { font-size: 14px; line-height: 1.4; color: var(--text); transition: color .2s; }
.page-reward:hover .page-reward__name { color: var(--accent); }
.page-reward__title { font-size: 20px; font-weight: 900; font-style: italic; line-height: 1; text-shadow: 0 1px 2px rgb(var(--black) / .7); text-transform: uppercase; color: #fff; }
.page-reward__amount, .page-reward__text, .page-reward__terms { display: none; }
.page-reward__cta { display: grid; }
.page-reward__cta .quill-btn { width: 100%; }
.page-rewards__terms { margin: 10px 0 0; font-size: 12px; color: var(--text-2); }

/* ---------- Special banner (shop): 1056/218 picture, text column with dark fade on the left, primary button with arrows ---------- */
.field-banner { position: relative; display: grid; grid-template-rows: 1fr; overflow: hidden; width: 100%; aspect-ratio: 1056 / 218; min-height: 218px; padding: 4px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.field-banner::before, .field-banner::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.field-banner::before { inset: 0; border: 1px solid rgb(var(--n800)); border-radius: 12px; }
.field-banner::after { inset: 3px; max-height: 64px; border: 2px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; opacity: .4; background: linear-gradient(0deg, rgb(var(--white) / 0), rgb(var(--white))) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor; mask-composite: exclude; }
.field-banner__pic { position: absolute; inset: 4px; z-index: 0; overflow: hidden; border-radius: 10px; }
.field-banner__pic img { width: 100%; height: 100%; object-fit: cover; }
.field-banner__content { position: relative; z-index: 1; grid-row: 1 / -1; display: grid; align-content: center; justify-items: center; row-gap: 32px; width: 590px; padding: 12px 56px; background: linear-gradient(90deg, rgb(var(--n1000)), rgb(var(--n1000) / .4) 70%, rgb(var(--n1000) / 0)); }
.field-banner__title { max-width: 100%; font-size: 48px; font-weight: 900; font-style: italic; line-height: 1; text-shadow: var(--tshadow); text-align: center; text-transform: uppercase; text-wrap: balance; color: #fff; }
.field-banner__btn { min-width: 320px; }
.field-banner__clip { display: none; }

/* ---------- All games grid (11 cols, 3 rows, bottom fade + "more games") ---------- */
.plate-shelf--grid { position: relative; padding-bottom: 40px; }
.plate-grid { display: grid; grid-template-columns: repeat(var(--cols-grid), minmax(0, 1fr)); gap: 14px var(--gap); margin: 0 -2px; padding: 0 2px; }
.plate-grid::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 34px; height: 120px; background: var(--bg); -webkit-mask-image: linear-gradient(to bottom, rgb(var(--white) / 0) 0, #000 60px); mask-image: linear-gradient(to bottom, rgb(var(--white) / 0) 0, #000 60px); pointer-events: none; z-index: 5; }
.plate-grid .game-plate:nth-child(n+34) { display: none; }
.plate-grid__more { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-end; }

/* ---------- SEO / content boxes (dark panels, 1px stroke, italic headings) ---------- */
.folio-panel { position: relative; margin: 16px 0 0; padding: 24px 28px 28px; border: 1px solid rgb(var(--n800)); border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset; }
.folio-panel > *, .pocket-guide__grid > * { min-width: 0; }
.folio-panel--preface { padding: 24px 28px; }
.folio-panel--preface h1 { margin-bottom: 14px; font-size: 24px; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; color: #fff; }
.folio-panel--preface p { margin: 0 0 10px; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--text); }
.folio-panel--chapter.is-closed-book .folio-panel__body { max-height: 120px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
.folio-panel__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: transparent; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: color .2s; }
.folio-panel__more:hover { color: var(--accent); }
.folio-panel__more svg { width: 12px; height: 12px; transition: transform .2s; }
.folio-panel--chapter:not(.is-closed-book) .folio-panel__more svg { transform: rotate(180deg); }
.chapter-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 24px; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; color: #fff; }
.chapter-heading img, .chapter-heading svg { display: none; }
.chapter-subheading { margin: 22px 0 10px; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.chapter-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--text); }
.folio-panel > p.chapter-lead:last-child { padding: 14px 16px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.chapter-copy p { font-size: 15px; line-height: 1.6; color: var(--text); }
.chapter-copy p:last-child { margin-bottom: 0; }
.chapter-copy a, .folio-panel p a { font-weight: 700; text-decoration: underline; color: var(--text); }
.chapter-copy a:hover, .folio-panel p a:hover { color: rgb(var(--br200)); }
.appendix-scroll { overflow-x: auto; margin: 6px 0 4px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
table { width: 100%; min-width: 380px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border: 1px solid rgb(var(--n800)); }
thead th { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--accent); background: var(--bg-3); }
tbody tr:nth-child(odd) td { background: var(--bg-2); }
tbody tr:nth-child(even) td { background: rgb(var(--n960)); }
tbody td:first-child { font-weight: 700; color: #fff; }
tbody td { color: var(--text); }
.appendix-note { margin: 8px 0 0; font-size: 12px; color: var(--text-2); }
.field-jottings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; }
.field-jotting { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.field-jotting__value { font-size: 24px; font-weight: 900; font-style: italic; color: var(--accent); }
.field-jotting__label { font-size: 12px; color: var(--text); }
.chapter-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 6px; }
.chapter-step { display: flex; gap: 12px; padding: 14px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.chapter-step__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--label-new); color: #fff; font-weight: 900; font-size: 16px; text-shadow: 0 1px 0 rgb(var(--black) / .7); }
.chapter-step strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: #fff; }
.chapter-step p { margin: 0; font-size: 13px; color: var(--text); }
.tick-folio { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; padding: 14px 16px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.tick-folio li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text); }
.tick-folio li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat, linear-gradient(rgb(var(--ac400)), rgb(var(--ac600))); }
.quill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.pocket-guide__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.pocket-guide__badges { display: flex; gap: 10px; margin-top: 6px; }
.pocket-guide__badges img { height: 40px; width: auto; border-radius: 4px; }
.reading-desk__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; }
.reading-desk__card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.reading-desk__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; border: 1px solid rgb(var(--n800)); background: var(--grad-60); color: var(--accent); }
.reading-desk__icon svg { width: 20px; height: 20px; }
.reading-desk__card strong { font-size: 15px; font-weight: 700; color: #fff; }
.reading-desk__meta { font-size: 11px; color: var(--text-2); }
.reading-desk__card p { margin: 0 0 auto; font-size: 13px; color: var(--text); }
.reading-desk__card .quill-btn { align-self: flex-start; margin-top: 10px; }
.nest-egg-box__strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.nest-egg-method { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 36px; padding: 4px 3px; border: 1px solid var(--bg-3); border-radius: 2px; background: var(--grad-50); transition: border-color .2s, background .2s; }
.nest-egg-method:hover { border-color: var(--bg-c1); background: var(--grad-60); }
.nest-egg-method__icon img { height: 22px; width: auto; max-width: 68px; object-fit: contain; }
.nest-egg-method__initial { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); }

/* Reviews */
.reader-letters__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.reader-letters__word { font-size: 22px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--accent); }
.reader-letters__text { font-size: 13px; color: var(--text); }
.quill-stars { display: inline-flex; gap: 2px; }
.quill-star { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; background: #00b67a; }
.quill-star svg { width: 14px; height: 14px; fill: #fff; }
.quill-star.is-half-feathered { background: linear-gradient(90deg, #00b67a 50%, rgb(var(--n700)) 50%); }
.reader-letter__rating .quill-star { width: 16px; height: 16px; }
.reader-letter__rating .quill-star svg { width: 10px; height: 10px; }
.reader-letters__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reader-letter { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); }
.reader-letter__head { display: flex; align-items: center; gap: 10px; }
.reader-letter__avatar { flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--bg-c1); box-shadow: 0 0 0 2px rgb(var(--n700)); }
.reader-letter__avatar img { width: 100%; height: 100%; object-fit: cover; }
.reader-letter__name { font-size: 14px; font-weight: 700; color: #fff; }
.reader-letter__sub { font-size: 11px; color: var(--text-2); }
.reader-letter__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reader-letter__date { font-size: 11px; color: var(--text-2); }
.reader-letter__title { font-size: 14px; font-weight: 700; color: var(--accent); }
.reader-letter__text { margin: 0; font-size: 13px; color: var(--text); }
.reader-letter__verified { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; font-weight: 700; color: rgb(var(--g600)); }
.reader-letter__verified svg { width: 14px; height: 14px; }

/* FAQ */
.margin-notes__list { display: flex; flex-direction: column; gap: 8px; }
.margin-notes__item { overflow: hidden; border: 1px solid rgb(var(--n800)); border-radius: 8px; background: var(--grad-60); }
.margin-notes__question { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; border: 0; background: transparent; color: #fff; font-family: var(--font); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; transition: color .2s; }
.margin-notes__question:hover { color: var(--accent); }
.margin-notes__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-2); transition: transform .2s; }
.margin-notes__icon svg { width: 14px; height: 14px; }
.margin-notes__item.is-spread-open .margin-notes__icon { transform: rotate(180deg); color: var(--accent); }
.margin-notes__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.margin-notes__item.is-spread-open .margin-notes__answer { grid-template-rows: 1fr; }
.margin-notes__answer-inner { overflow: hidden; min-height: 0; }
.margin-notes__answer p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: var(--text); }

/* TOC */
.contents-page { margin: 16px 0 0; }
.contents-page__box { padding: 6px 20px; border: 1px solid rgb(var(--n800)); border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset; }
.contents-page__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-family: var(--font); font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.contents-page__title { display: inline-flex; align-items: center; gap: 8px; }
.contents-page__title svg { width: 18px; height: 18px; color: var(--accent); }
.contents-page__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; font-style: normal; text-transform: none; color: var(--text-2); }
.contents-page__toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.contents-page.is-closed-book .contents-page__toggle svg { transform: rotate(180deg); }
.contents-page__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.contents-page.is-closed-book .contents-page__body { grid-template-rows: 0fr; }
.contents-page__body-inner { overflow: hidden; }
.contents-page__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; counter-reset: toc; }
.contents-page__list li a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 6px; border: 1px solid rgb(var(--n800)); border-radius: 4px; background: var(--grad-60); box-shadow: var(--tab-shadow); color: var(--text-2); font-size: 14px; font-weight: 500; text-transform: uppercase; transition: color .2s, border-color .2s; }
.contents-page__list li a::before { counter-increment: toc; content: counter(toc); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--label-new); color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 0 rgb(var(--black) / .7); }
.contents-page__list li a:hover { color: var(--text); border-color: rgb(var(--n700)); }
.edition-date { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgb(var(--n800)); font-size: 12px; color: var(--text); }
.edition-date__label { font-weight: 700; color: #fff; }
.edition-date__icon { display: none; }
.edition-date__body { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.edition-date__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: rgb(var(--ac500) / .18); color: rgb(var(--ac150)); font-size: 11px; font-weight: 700; }
.edition-date__badge svg { width: 14px; height: 14px; }

/* ---------- Footer (dotted texture, help/lang buttons, logo + legal, 5 link columns, payments, bottom links) ---------- */
.colophon { position: relative; z-index: 1; margin-top: 16px; background: url("/images/ui/footer-bg.webp") top center / 100% auto no-repeat, linear-gradient(180deg, rgb(var(--n960)), rgb(var(--n1000)) 10%), var(--bg); }
.colophon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(0deg, rgb(var(--n960)), rgb(var(--n750)) 9%, rgb(var(--n960))); box-shadow: 0 2px 4px rgb(var(--black) / .35), 0 1px rgb(var(--n1000)); }
.colophon__inner { max-width: 1920px; margin: 0 auto; padding: 32px 112px 0; }
.colophon__top { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 0 32px; }
.colophon__lang, .colophon__chat, .colophon__help, .colophon__app { --mh: 56px; --fs: 18px; --px: 19px; min-width: 150px; font-weight: 800; }
.colophon__lang img, .colophon__help img, .colophon__chat img { width: 24px; height: 24px; border-radius: 2px; object-fit: cover; }
.colophon__help svg, .colophon__chat svg, .colophon__app svg { width: 24px; height: 24px; }
.colophon__ico { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.colophon__app, .colophon__chat { display: none; }
.colophon__body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px 40px; padding: 32px 0 20px; border-top: 1px solid var(--bg-3); }
.colophon__brand { display: grid; align-content: start; justify-items: start; gap: 16px; }
.colophon__brand .colophon__logo img { width: 95px; height: 32px; }
.colophon__legal { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text-3); }
.colophon__legal p { margin: 0 0 4px; }
.colophon__18 { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid rgb(var(--n100)); border-radius: 50%; font-size: 14px; font-weight: 700; color: rgb(var(--n100)); }
.colophon__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 40px; padding-bottom: 32px; }
.colophon__col .colophon__col-title { margin: 0 0 20px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text); }
.colophon__col ul { display: flex; flex-direction: column; gap: 20px; }
.colophon__col a, .colophon__col span { display: inline-block; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text); cursor: pointer; transition: color .2s; }
.colophon__col a:hover, .colophon__col span:hover { color: var(--accent); }
.colophon__pay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0; border-top: 1px solid var(--bg-3); border-bottom: 1px solid var(--bg-3); }
.colophon__pay-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
.colophon__pay-row .nest-egg-method { width: 128px; height: 56px; margin: 6px; padding: 10px 14px; border-radius: 8px; }
.colophon__pay-row .nest-egg-method .nest-egg-method__icon img { height: 32px; max-width: 100px; }
.colophon__pay-row .nest-egg-method--more { width: 128px; }
.colophon__pay-row .nest-egg-method--more .nest-egg-method__initial { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-transform: none; color: var(--text-3); }
.colophon__pay-row .nest-egg-method--more svg { width: 16px; height: 16px; }
.colophon__pay-row .nest-egg-method--more:hover .nest-egg-method__initial { color: var(--accent); }
.colophon__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; padding: 6px 0 18px; }
.colophon__badges img { display: block; height: 36px; width: auto; }
.colophon__badges a img[src*="gambleaware"] { height: 20px; }
.colophon__badges a img[src*="gordon-moody"] { height: 32px; }
.colophon__badges [role="button"] { cursor: pointer; }
.colophon__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding: 32px 0 40px; }
.colophon__links a, .colophon__links span { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--text-3); cursor: pointer; transition: color .2s; }
.colophon__links a:hover, .colophon__links span:hover { color: var(--accent); }
.imprint-line { display: none; }
.flock-links { display: none; }

/* Bottom mobile navigation */
.perch-dock { display: none; }

/* Promo bar (desktop, appears after scrolling) */
.bookmark-ribbon { position: fixed; left: 50%; bottom: 14px; z-index: 70; width: min(1180px, calc(100% - 24px)); transform: translate(-50%, 140%); transition: transform .35s ease; }
.bookmark-ribbon.is-in-the-hide { transform: translate(-50%, 0); }
.bookmark-ribbon__inner { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid rgb(var(--n800)); border-radius: 12px; background: var(--grad-80); box-shadow: var(--shadow); }
.bookmark-ribbon__logo { height: 30px; width: auto; }
.bookmark-ribbon__info { display: flex; flex-direction: column; min-width: 0; }
.bookmark-ribbon__label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.bookmark-ribbon__title { overflow: hidden; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.bookmark-ribbon__btn { margin-left: auto; }
.bookmark-ribbon__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgb(var(--n800)); border-radius: 50%; background: var(--grad-60); color: var(--text); cursor: pointer; }
.bookmark-ribbon__close svg { width: 14px; height: 14px; }
.back-to-cover { position: fixed; right: 18px; bottom: 90px; z-index: 65; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgb(var(--n800)); border-radius: 50%; background: var(--grad-60); box-shadow: var(--tab-shadow); color: var(--text); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.back-to-cover.is-in-the-hide { opacity: 1; visibility: visible; }
.back-to-cover svg { width: 18px; height: 18px; }

/* ---------- Mobile drawer ---------- */
.margin-menu, .margin-menu__backdrop { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1919px) {
  :root { --cols: 7; --cols-rank: 6; --cols-wide: 4; --cols-grid: 9; --cols-promo: 4; --cols-sport: 7; --gap-rank: 8px; }
  .plate-grid .game-plate:nth-child(n+28) { display: none; }
  .frontis-carousel { --col: 560px; }
  .frontis-slide__title { --fs: 36px; }
  .frontis-slide__inner { gap: 16px; }
  .frontis-slide__card { gap: 12px; }
  .frontis-slide__media::before { aspect-ratio: 3.6136; }
  .field-banner { aspect-ratio: 1056 / 218; }
  .field-banner__content { row-gap: 16px; width: 420px; padding: 12px 48px; }
  .field-banner__title { font-size: 32px; }
  .field-banner__btn { min-width: 220px; }
  .colophon__inner { padding: 32px 64px 0; }
  .publisher-plates__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .publisher-plate__name { font-size: 10px; }
  .plate-number { font-size: 96px; }
}
@media (max-width: 1535px) {
  :root { --cols: 6; --cols-rank: 5; --cols-wide: 4; --cols-grid: 8; --cols-promo: 4; --cols-sport: 7; }
  .plate-grid .game-plate:nth-child(n+25) { display: none; }
  .publisher-plates__grid { grid-template-columns: none; grid-auto-columns: minmax(140px, 1fr); }
  .prize-plates { gap: 12px; }
  .prize-plate__content { max-width: 60%; }
}
@media (max-width: 1400px) {
  .colophon__cols { gap: 0 24px; }
  .colophon__body { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .publisher-plates__grid { grid-auto-columns: 150px; }
  .sport-plates__grid { grid-template-columns: none; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: 180px; }
}
@media (max-width: 1279px) {
  :root { --hdr-h: 60px; --nav-h: 0px; --cols: 6; --cols-rank: 5; --cols-wide: 3; --cols-grid: 6; --cols-promo: 3; --cols-sport: 6; --gap: 8px; --gap-rank: 8px; --rank-shift: 34px; --tile-r: 8px; --tile-sp: 1px; --row-gap: 14px; }
  html { scroll-padding-top: 130px; }
  .reading-room { padding-top: var(--hdr-h); }
  .index-nav { display: none; }
  .title-masthead__inner { gap: 4px; padding: 0 11px 0 16px; background: var(--grad-50); }
  .title-masthead__inner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(rgb(var(--n960)), rgb(var(--n750)) 9%, rgb(var(--n960))); box-shadow: 0 1px rgb(var(--n1000)), 0 2px 4px rgb(var(--black) / .35); }
  .index-toggle { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; justify-content: center; align-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
  .index-toggle span { display: block; width: 23px; height: 3px; border-radius: 2px; background: var(--grad-150); filter: drop-shadow(0 1px rgb(var(--black))); }
  .index-toggle span + span { margin-top: 5px; }
  .imprint-logo { margin: 0 0 0 12px; }
  .imprint-logo img { width: 95px; height: 32px; }
  .catalogue-search, .title-masthead__actions { display: none; }
  .title-masthead__login-m, .title-masthead__reg-m { display: inline-flex; --bs: 14px; --mh: 36px; --fs: 12px; --px: 12px; --rad: 7px; --hin: 3px; --hrad: 5px; min-width: 36px; white-space: nowrap; }
  .title-masthead__reg-m { --bs: 9px; }
  .title-masthead__login-m { margin-left: auto; }
  .title-masthead__reg-m { margin-left: 4px; }
  .frontispiece { margin-top: 0; }
  .frontispiece .folio-frame { padding: 0; }
  .frontis-carousel { --col: 100%; --hpad: 16px; padding: 0; border: 0; border-radius: 0; background: none; }
  .frontis-carousel__track { border-radius: 0; }
  .frontis-slide { grid-template-columns: 1fr; height: 340px; }
  .frontis-slide__media::before { aspect-ratio: auto; }
  .frontis-slide__media { height: 340px; }
  .frontis-slide__inner { align-self: end; align-content: end; gap: 4px; min-height: 138px; padding: 4px 16px 23px; }
  .frontis-slide__inner::before { background: linear-gradient(rgb(var(--n1000) / 0), rgb(var(--n1000) / .3) 10%, rgb(var(--n1000) / .85)); }
  .frontis-slide__card { gap: 7px; }
  .frontis-slide__label { min-height: 16px; font-size: 12px; line-height: 1.4; }
  .frontis-slide__title { --fs: 28px; }
  .frontis-slide__action { margin-top: 1px; }
  /* hero CTA = stb .button--m with --stb-main-cta-button-min-height: 62px, min-width 224 (plate 216x56 like the original mobile) */
  .quill-btn--feature, .quill-btn--feature.quill-btn--m { --bs: 71px; --mh: 62px; --fs: 18px; --px: 45px; --rad: 13px; --hrad: 8px; --ai: 11px; --at: 10px; --ab: 12px; --aw: 58px; --si: 3px; --sr: 8px; min-width: 224px; }
  .frontis-carousel__nav { display: none; }
  .frontis-carousel__dots { bottom: 8px; left: 0; width: 100%; }
  .frontis-carousel__dot { padding: 4px 4px; }
  .frontis-carousel__dot::before, .frontis-carousel__dot::after { width: 11px; height: 4px; }
  /* sticky category strip */
  .index-tabs { position: sticky; top: var(--hdr-h); z-index: 30; display: flex; align-items: end; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 11px 8px 8px; background: linear-gradient(rgb(var(--n1000)), rgb(var(--n950))); box-shadow: inset 0 -1px 0 0 rgb(var(--n950)); }
  .index-tabs::-webkit-scrollbar { display: none; }
  .index-tab { position: relative; display: grid; grid-auto-flow: row; justify-items: center; align-content: end; gap: 2px; flex: 0 0 auto; padding: 0 10px; border: 0; background: transparent; font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1.4; text-transform: uppercase; text-align: center; white-space: nowrap; color: rgb(var(--n200)); cursor: pointer; transition: color .2s; }
  .index-tab img, .index-tab svg { width: 32px; height: 32px; object-fit: contain; }
  .index-tab__ico { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
  .index-tab:hover, .index-tab.is-bookmarked { color: rgb(var(--br100)); }
  .index-tab--search { padding-right: 14px; margin-right: 6px; border-right: 1px solid rgb(var(--n800)); }
  .folio-page { padding-top: 20px; }
  .plate-grid .game-plate:nth-child(n+25) { display: none; }
  .plate-grid::after { height: 100px; bottom: 30px; }
  .plate-grid { gap: 8px; }
  .plate-shelf--grid { padding-bottom: 36px; }
  .plate-shelf__head { margin-bottom: 8px; }
  .plate-shelf__arrows { display: none; }
  .plate-shelf__link svg { display: block; }
  .page-scroll { margin: -6px -2px -6px; padding: 6px 2px 6px; scroll-padding: 2px; }
  .page-scroll--ranked { margin-bottom: -16px; padding-bottom: 16px; }
  .game-plate__badge { top: -3px; height: 14px; padding: 0 5px 1px; font-size: 10px; }
  .game-plate--wide .game-plate__badge { top: 3px; right: 3px; }
  .game-plate__jackpot { min-height: 22px; font-size: 11px; line-height: 1.2; }
  .game-plate__results { height: 34px; bottom: -3px; padding: 4px 5px 0; border-radius: 0 0 7px 7px; grid-template-columns: repeat(auto-fit, 16px); grid-template-rows: 16px; }
  .game-plate__results span:nth-child(n+5) { display: none; }
  .game-plate--wide .game-plate__results span:nth-child(n+5) { display: flex; }
  .game-plate--wide .game-plate__results span:nth-child(n+10) { display: none; }
  .game-plate__results span { width: 16px; font-size: 10px; line-height: 1.2; }
  .game-plate__seats { height: 18px; margin-bottom: 5px; padding: 2px 4px; border-radius: 2px; font-size: 12px; }
  .game-plate__seats::before { width: 12px; height: 12px; }
  .game-plate__limits { height: 16px; margin: 0 4px -6px; padding: 1px 3px 2px; border-radius: 2px; font-size: 10px; line-height: 1.2; }
  .game-plate__pic { background-size: 29px 32px; }
  .game-plate__hover { gap: 8px; padding-block: 10px; }
  .game-plate__play { width: 44px; height: 44px; }
  .game-plate__play::before { inset: 3px 4px 5px; width: 36px; height: 36px; }
  .game-plate__play svg { width: 20px; height: 20px; margin-left: 2px; }
  .game-plate__demo { font-size: 12px; }
  .plate-number { margin-left: calc(var(--rank-shift) - 34px + 6px); margin-bottom: -5px; font-size: 64px; line-height: 1; letter-spacing: -7px; -webkit-text-stroke: 1px rgb(var(--br160)); }
  .numbered-plate:first-child .plate-number { margin-left: calc(var(--rank-shift) - 34px + 6px); }
  .plate-number--small { letter-spacing: -14px; margin-left: calc(var(--rank-shift) - 34px - 5px); }
  .publisher-plates__grid { grid-auto-columns: 88px; gap: 8px 10px; }
  .publisher-plate { aspect-ratio: 90 / 72; padding: 13.6% 4px 0; }
  .publisher-plate__name { margin-top: 13.75%; }
  .sport-plates__grid { --sgap: 6px; grid-template-columns: none; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: 118px; }
  .sport-plate { border-radius: 8px; }
  .sport-plate::before, .sport-plate::after { border-radius: 8px; }
  .sport-plate__pic, .sport-plate__pic img { border-radius: 6px; }
  .sport-plate__pic::before { border-radius: 6px 6px 0 0; }
  .sport-plate__name { min-height: 28px; font-size: 12px; }
  .sport-plate--featured .sport-plate__pic { border-radius: 7px; }
  .sport-plate--featured .sport-plate__pic img { top: 2px; left: 0; right: -30px; }
  .sport-plate__action { padding: 35px 12px 12px; }
  .sport-plate__action .quill-btn { --mh: 48px; --fs: 18px; }
  .prize-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .prize-plate, .prize-plate:nth-child(1), .prize-plate:nth-child(2) { grid-column: span 1; }
  .prize-plate:nth-child(5) { grid-column: span 2; }
  .prize-plate { min-height: 88px; padding: 16px 12px; border-radius: 8px; }
  .prize-plate__content { max-width: 68%; }
  .prize-plate__title { font-size: 16px; }
  .prize-plate__desc { font-size: 10px; line-height: 1.2; }
  .page-scroll--bonuses { grid-auto-columns: 235px; }
  .page-reward__body { padding: 16px 12px 11px; }
  .page-reward__title { font-size: 18px; }
  .field-banner { aspect-ratio: 736 / 154; min-height: 154px; }
  .field-banner__content { row-gap: 16px; width: 356px; padding: 12px 28px; }
  .field-banner__title { font-size: 24px; text-align: left; }
  .field-banner__btn { min-width: 220px; justify-self: start; }
  .folio-panel { padding: 16px 20px 20px; border-radius: 8px; }
  .reading-desk__grid, .field-jottings { grid-template-columns: repeat(2, 1fr); }
  .reader-letters__grid { grid-template-columns: repeat(2, 1fr); }
  .colophon { background-image: url("/images/ui/footer-m-bg.webp"), linear-gradient(180deg, rgb(var(--n960)), rgb(var(--n1000)) 10%); }
  .colophon__inner { padding: 16px 0 0; }
  .colophon__top { padding: 0 16px 20px; }
  .colophon__body { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px 16px; }
  .colophon__cols { padding: 0 16px 24px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .colophon__links { padding: 24px 16px 32px; }
  .bookmark-ribbon { display: none; }
}
@media (max-width: 1279px) {
  /* drawer */
  .margin-menu__backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgb(var(--black) / .6); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .margin-menu__backdrop.is-spread-open { opacity: 1; visibility: visible; }
  .margin-menu { display: flex; flex-direction: column; gap: 12px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 90; width: min(420px, calc(100% - 40px)); overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 24px; background: var(--bg); box-shadow: 6px 0 24px rgb(var(--black) / .6); transform: translateX(-104%); transition: transform .26s ease; scrollbar-width: none; }
  .margin-menu::-webkit-scrollbar { display: none; }
  .margin-menu.is-spread-open { transform: translateX(0); }
  .margin-menu__head { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 60px; margin: 0 -12px; padding: 0 11px 0 16px; background: var(--grad-50); box-shadow: inset 0 -1px 0 rgb(var(--n750)), inset 0 -4px 0 rgb(var(--n960)); }
  .margin-menu__head > img { width: 95px; height: 32px; margin-left: 12px; }
  .margin-menu__close { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; filter: drop-shadow(0 1px rgb(var(--black))); }
  .margin-menu__close svg { width: 24px; height: 24px; }
  .margin-menu__cta { display: flex; gap: 4px; margin-left: auto; }
  .margin-menu__cta .quill-btn { --bs: 14px; --mh: 36px; --fs: 12px; --px: 12px; --rad: 7px; --hin: 3px; --hrad: 5px; min-width: 36px; }
  .margin-menu__cta .quill-btn--gilt { --bs: 9px; }
  .margin-menu__search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 48px; margin-top: 12px; padding: 0 15px; border: 1px solid rgb(var(--n700)); border-radius: 8px; color: rgb(var(--n600)); font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; background: linear-gradient(rgb(var(--n150)), rgb(var(--n50))); box-shadow: 0 3px 3px rgb(var(--n300) / .2), 0 1px 1px rgb(var(--black) / .4), 0 -4px 2px rgb(var(--white) / .25); }
  .margin-menu__search svg, .margin-menu__search .catalogue-search__ico { width: 20px; height: 20px; color: rgb(var(--n600)); }
  .margin-menu__banner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 100px; padding: 12px 10px 12px 12px; border: 1px solid rgb(var(--n800)); border-radius: 8px; overflow: hidden; color: #fff; background: var(--bg); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset; }
  .margin-menu__banner img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .35; }
  .margin-menu__banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(var(--n1000) / .9) 0%, rgb(var(--n1000) / .6) 60%, rgb(var(--n1000) / .2) 100%); }
  .margin-menu__banner > span { position: relative; z-index: 1; display: grid; gap: 4px; }
  .margin-menu__banner small { font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--text); }
  .margin-menu__banner b { font-size: 20px; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: var(--tshadow); }
  .margin-menu__banner .quill-btn { position: relative; z-index: 1; --bs: 12px; --mh: 40px; --fs: 14px; --px: 16px; --rad: 8px; }
  .margin-menu__label { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; flex: 0 0 auto; margin: 4px 0 -4px; font-size: 14px; font-weight: 500; text-align: center; color: var(--text-2); }
  .margin-menu__label::before, .margin-menu__label::after { content: ""; height: 1px; background: rgb(var(--n800)); }
  .margin-menu__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
  .margin-menu__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .margin-menu__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .margin-menu__tile { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 72px; padding: 8px 4px; border: 1px solid rgb(var(--n800)); border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; color: var(--text); background: var(--grad-60); box-shadow: 0 0 0 1px rgb(var(--n1000)) inset, 0 0 0 2px rgb(var(--n950)) inset; cursor: pointer; }
  .margin-menu__tile::after { content: ""; position: absolute; inset: 1px; z-index: -1; height: 45%; border: 1px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0; opacity: .2; -webkit-mask: linear-gradient(#fff, transparent); mask: linear-gradient(#fff, transparent); pointer-events: none; }
  .margin-menu__tile.is-bookmarked { color: var(--accent); }
  .margin-menu__tile img, .margin-menu__tile svg { width: 32px; height: 32px; object-fit: contain; }
  .margin-menu__tile--s { min-height: 60px; gap: 4px; font-size: 12px; text-transform: none; }
  .margin-menu__tile--s img, .margin-menu__tile--s svg { width: 20px; height: 20px; }
  .margin-menu__tile span { max-width: 100%; }
}
@media (max-width: 900px) {
  .pocket-guide__grid { grid-template-columns: 1fr; }
  .colophon__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  :root { --cols-grid: 4; }
  body { padding-bottom: 0; }
  .folio-frame { padding: 0 var(--pad); }
  .frontispiece .folio-frame { padding: 0; }
  .index-tabs { padding: 11px 8px 8px; }
  .folio-page { padding: 12px 0 28px; row-gap: 16px; }
  .page-scroll { grid-auto-columns: 92px; }
  .page-scroll--wide { grid-auto-columns: calc(92px * 2 + var(--gap)); }
  .page-scroll--ranked { grid-auto-columns: calc(92px + var(--rank-shift)); }
  .page-scroll--bonuses { grid-auto-columns: 235px; }
  .plate-grid .game-plate:nth-child(n+17) { display: none; }
  .plate-grid::after { height: 120px; bottom: 24px; }
  .plate-shelf--grid { padding-bottom: 30px; }
  .field-banner { display: grid; grid-template-rows: auto 1fr; aspect-ratio: auto; min-height: 0; padding: 2px; }
  .field-banner::before { border-radius: 12px; }
  .field-banner::after { inset: 2px; border-width: 1px; }
  .field-banner__pic { position: relative; inset: auto; width: 100%; height: 200px; max-height: 200px; aspect-ratio: auto; border-radius: 10px 10px 0 0; }
  .field-banner__content { grid-row: auto; width: 100%; row-gap: 8px; padding: 12px; background: none; }
  .field-banner__content::before { content: ""; position: absolute; top: -36px; left: 0; z-index: -1; width: 100%; height: 38px; background: linear-gradient(0deg, rgb(var(--n1000)) 0%, rgb(var(--n1000) / .4) 70%, transparent 100%); }
  .field-banner__title { font-size: 20px; text-align: center; }
  .field-banner .field-banner__btn { min-width: 120px; justify-self: center; --bs: 12px; --mh: 48px; --fs: 18px; --px: 45px; --rad: 10px; --hin: 4px; --hrad: 5px; padding-block: 0; --bl: url("/images/ui/psim-l.webp"); --bc: url("/images/ui/psim-c.webp"); --br: url("/images/ui/psim-r.webp"); }
  .field-banner__btn .quill-btn__arrows { display: none; }
  .folio-panel { margin: 16px 0 0; padding: 16px; }
  .folio-panel--preface { padding: 16px; }
  .folio-panel--preface h1 { font-size: 20px; }
  .folio-panel--preface p { font-size: 14px; }
  .chapter-heading { font-size: 20px; }
  .quill-btn--lg { --px: 16px; --mh: 48px; --fs: 16px; white-space: normal; text-align: center; line-height: 1.1; max-width: 100%; }
  .quill-row .quill-btn { max-width: 100%; }
  .appendix-scroll { max-width: 100%; }
  .chapter-steps, .reading-desk__grid, .reader-letters__grid { grid-template-columns: 1fr; }
  .field-jottings { grid-template-columns: repeat(2, 1fr); }
  .contents-page { margin: 16px 0 0; }
  .colophon { margin-top: 16px; }
  .colophon__top { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding: 0 16px 20px; }
  .colophon__lang, .colophon__chat, .colophon__help, .colophon__app { --mh: 56px; --fs: 12px; --px: 6px; min-width: 0; flex-direction: column; gap: 4px; white-space: normal; line-height: 1.1; }
  .colophon__app, .colophon__chat { display: inline-flex; }
  .colophon__body { padding: 20px 16px 8px; }
  .colophon__cols { grid-template-columns: 1fr; gap: 8px; padding: 0 16px 16px; }
  .colophon__col { padding: 0 16px; border: 1px solid rgb(var(--n800)); border-radius: 8px; background: var(--grad-60); box-shadow: var(--tab-shadow); }
  .colophon__col .colophon__col-title { position: relative; margin: 0; padding: 16px 40px 16px 0; font-size: 16px; cursor: pointer; }
  .colophon__col .colophon__col-title::after { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d3c1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
  .colophon__col ul { display: none; padding: 0 0 16px; gap: 14px; }
  .colophon__col.is-spread-open ul { display: flex; }
  .colophon__col.is-spread-open .colophon__col-title::after { transform: translateY(-50%) rotate(180deg); }
  .colophon__pay { padding: 20px 16px; }
  .colophon__pay-row .nest-egg-method { width: 128px; height: 56px; margin: 6px 4px; }
  .colophon__links { gap: 20px 24px; padding: 24px 16px 32px; }
  .back-to-cover { right: 12px; bottom: 16px; width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .title-masthead__login-m, .title-masthead__reg-m { --px: 10px; }
  .frontis-slide__title { --fs: 26px; }
  .plate-shelf__title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
  .margin-menu { width: calc(100% - 40px); }
  .margin-menu__tiles { gap: 6px; }
  .colophon__lang, .colophon__chat, .colophon__help, .colophon__app { --fs: 11px; }
}
@media (max-width: 411px) {
  :root { --cols-grid: 4; }
  .prize-plates { gap: 6px; }
  .prize-plate__content { max-width: 64%; }
}

/* perf pass 09.10 (no visual change): CTA decor sleeps on hidden slides and while the hero is off-screen; long text sections render when scrolled near */
.frontis-slide:not(.is-bookmarked) .quill-btn--feature, .frontis-slide:not(.is-bookmarked) .quill-btn--feature *, .frontis-slide:not(.is-bookmarked) .quill-btn--feature *::before, .frontis-slide:not(.is-bookmarked) .quill-btn--feature *::after,
.frontispiece.is-out-of-sight .quill-btn--feature, .frontispiece.is-out-of-sight .quill-btn--feature *, .frontispiece.is-out-of-sight .quill-btn--feature *::before, .frontispiece.is-out-of-sight .quill-btn--feature *::after { animation-play-state: paused; }