/* Otto Spins theme on top of the app CSS. Source of /assets/otto-[hash].css (built by tools/build.py).
   Follows the Figma file "Social Casino — Guest Landing & Design System" (Otto Spins pages): deep-sea indigo page with a
   faint pattern, cyan for everything you can press, gold only for coins, violet glow behind Otto. Unbounded for headings
   and numbers, Manrope for the interface. Blocks sit straight on the page; only banners, covers and floating windows
   get a surface. Sentence case everywhere: no tracked capital labels. */

/* ---------- Fonts (self-hosted, latin, variable) ---------- */
@font-face{font-family:Unbounded;src:url(/assets/unbounded-latin-variable.woff2)format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/manrope-latin-variable.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

/* ---------- Tokens (Figma variables, Semantic / Deep) ---------- */
:root,[data-theme=night]{
  --font-display:Unbounded,"Arial Black",system-ui,sans-serif;--font-body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#080d24;--surface:#0f1636;--surface-2:#18214a;--surface-3:#263266;
  --line:#f1f5ff17;--line-strong:#f1f5ff2e;
  --ink:#f1f5ff;--ink-muted:#a9b4d6;--ink-dim:#6e7aa6;
  /* the app's main accent slot is the cyan "press me" colour */
  --gold:#2ff3e0;--gold-light:#7ff9ee;--gold-deep:#1fd3c2;--on-gold:#04201f;
  --coin:#ffc93c;--coin-deep:#e0a92e;--on-coin:#1a1200;--violet:#8a4dff;--pink:#ff4fb8;--coral:#ff7a59;
  --cyan:#2ff3e0;--on-cyan:#04201f;--magenta:#ff4fb8;--on-magenta:#1a0612;--jade:#2ff3e0;--on-jade:#04201f;
  --overlay:#080d24cc;--focus-ring:#7ff9ee;
  --shadow-card:0 8px 24px #00000059;--shadow-tile-hover:none;--shadow-cta:none;
  --glow-cyan:0 0 28px #2ff3e055;--glow-gold:0 0 32px #ffc93c59;--glow-violet:0 0 80px 10px #8a4dff73;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --page:1280px;--gutter:80px}
html{background:var(--bg)}
body{background:var(--bg) url(/img/pattern.webp) 0 0/627px 627px repeat;font-family:var(--font-body);color:var(--ink)}
body a{color:var(--gold)}
::selection{background:#2ff3e055;color:#fff}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3,.fz-section__head h2{font-family:var(--font-display)}
/* Sentence case: the app's capital-letter labels become normal text. */
.fz-tile__title,.fz-banner__eyebrow,.fz-day__n,.fz-side-label,.fz-footer__col b,.levels-table th,.bet .lbl,.hand-label,.paytable th,.demo-bar__tag,
.demo-bar__bal small,.history-table th,.safe-stat small,.slot-title,.slot-tags span,.slot-overlay__title,.slot-win small,.slot-mini,.slot-automenu small{text-transform:none;letter-spacing:0}

/* ---------- Buttons (Figma: Button Primary / Outline / Ghost, Medium 44, Large 56) ---------- */
.fz-btn,.btn{border-radius:var(--radius-md);font-family:var(--font-body);font-weight:700;letter-spacing:0;text-transform:none}
.fz-btn--gold,.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold);box-shadow:none;filter:none}
.fz-btn--gold:hover,.btn-primary:hover:not(:disabled){background:var(--gold-light);border-color:var(--gold-light);color:var(--on-gold);box-shadow:var(--glow-cyan);filter:none;transform:none}
.fz-btn--gold:active,.btn-primary:active{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:none;transform:none}
.fz-btn--ghost{background:0 0;border:1px solid transparent;color:var(--ink-muted)}
.fz-btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.auth-btns .auth-signin,.ot-age [data-age=no]{border:1.5px solid var(--surface-3)!important;color:var(--ink)!important;background:0 0!important}
.auth-btns .auth-signin:hover{border-color:var(--ink-dim)!important}
.auth-btns .fz-btn{height:44px;padding:0 20px;font-size:14px}
.fz-btn--lg{height:56px;padding:0 32px;font-size:16px}

/* ---------- Header (Figma: Header) ---------- */
.fz-header.app-header{display:flex;align-items:center;gap:16px;height:80px;padding:0 max(24px,calc((100% - var(--page))/2));background:var(--bg);border-bottom:1px solid var(--line);box-shadow:none}
.app-header #menu-btn{order:0;width:40px;height:40px;padding:0;border-radius:var(--radius-md);color:var(--ink-muted)}
.app-header .brand{order:1;margin-right:8px}
.app-header .brand .logo-full{height:48px;width:auto;display:block}
.app-header .brand .logo-mark{display:none}
.app-header>.fz-spacer{display:none}
.ot-topnav{order:2;flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ot-topnav::-webkit-scrollbar{display:none}
.ot-topnav a{flex:none;padding:9px 14px;border-radius:var(--radius-md);color:var(--ink-muted);font-size:14px;font-weight:600;text-decoration:none}
.ot-topnav a:hover{color:var(--ink);background:var(--surface-2)}
.ot-topnav a.is-on{color:var(--ink);background:var(--surface-2)}
.app-header .row-controls{order:3;margin-left:auto;gap:12px}
html.is-guest .app-header .fz-balance,html.is-guest .app-header #freecoins-btn{display:none}
.fz-balance{border-radius:var(--radius-md);background:var(--surface-2);border:0}
.fz-avatar{border-color:var(--gold)}
.fz-avatar small{background:var(--gold);color:var(--on-gold)}
@media (max-width:1180px){.ot-topnav a{padding:9px 10px;font-size:13px}}
@media (max-width:900px){
  .fz-header.app-header{height:60px;padding:0 12px;gap:8px}
  .ot-topnav{display:none}
  .app-header .brand .logo-full{display:none}
  .app-header .brand .logo-mark{display:block;width:32px;height:41px}
  .is-guest .app-header .auth-btns .fz-btn{height:40px;padding:0 14px;font-size:13px}
  html:not(.is-guest) .app-header #freecoins-btn{display:none}
}

/* ---------- Side menu: a drawer on every screen ---------- */
@media (min-width:901px){
  .app,.app.side-collapsed{--side-w:0px;grid-template-columns:minmax(0,1fr);background:none}
  .app-side{position:fixed;z-index:80;top:0;bottom:0;left:0;width:288px;height:auto;padding:16px 12px;overflow-y:auto;
    background:var(--surface);border-right:1px solid var(--line);transform:translate(-105%);transition:transform var(--t-slow) var(--ease)}
  .app-side.open{transform:none}
  .app-side .side-close{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px 12px}
  .drawer-back{display:block}
}
.fz-sidebar{background:var(--surface)}
.fz-side-link{border-radius:var(--radius-md)}
.fz-side-link.is-on{background:var(--surface-2);color:var(--ink)}
.fz-side-promo,.side-collapsed .side-promo-mini,.side-promo-mini{background:var(--surface-2)}
.fz-bottomnav{background:var(--surface);border-top:1px solid var(--line)}

/* ---------- Page width: 1280 content, 80 gutters ---------- */
.app-main{width:100%;max-width:calc(var(--page) + 2 * var(--gutter));margin:0 auto;padding:0 max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px));gap:56px}
@media (min-width:1200px){.app-main{padding-left:var(--gutter);padding-right:var(--gutter)}}
@media (max-width:900px){.app-main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));gap:40px}}
.app-main>:first-child{margin-top:24px}

/* ---------- Blocks: no background, no outline. Banners keep theirs. ---------- */
.fz-banner,.fz-banner--gold,.fz-banner--cyan,.daily-hero{background:var(--surface);border-color:var(--line)}
.fz-banner--img{background-image:var(--bg-d);background-position:100%;background-size:cover;border-color:var(--line)}
@media (max-width:900px){.fz-banner--img{background-image:var(--bg-m);background-position:bottom}}
.demo-bar,.slot-bar{background:none;border:0;box-shadow:none;padding-left:0;padding-right:0}
.promo-card,.fz-widget,.howto,.fz-strip{background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
.promo-card:before{display:none}
.guest-feat:hover,.promo-card:hover,.fz-widget:hover{transform:none;box-shadow:none}
.empty{background:none;border:0;padding-left:0;padding-right:0}
.faq details,.faq details:hover,.faq details[open]{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 0}
.faq summary{font-weight:700}
.faq summary:hover{color:var(--gold)}
.welcome-page{background:none;border:0;min-height:0;padding:24px 0}
/* the welcome picture is Otto with a coin (160x200), not the old square coin: give it its own box */
.welcome-coin{width:auto;height:auto;background:none;border-radius:0;animation:none}
.welcome-coin img{display:block;width:140px;height:auto;filter:drop-shadow(0 0 28px #8a4dff66);animation:otFloat 5s ease-in-out infinite}
@media (max-width:900px){.welcome-coin img{width:112px}}
@media (prefers-reduced-motion:reduce){.welcome-coin img{animation:none}}
.modal{box-shadow:var(--shadow-card);border-radius:var(--radius-lg);background:var(--surface)}
.notfound__code{display:none}
.notfound__art img{width:200px;height:auto}

/* ---------- Section heads (Figma: H2 Unbounded 28/34, right-side controls) ---------- */
.fz-section{gap:24px}
.fz-section__head{align-items:center;gap:12px}
.fz-section__head h2{font:700 28px/34px var(--font-display);letter-spacing:-.005em;color:var(--ink)}
.fz-section__head h2 svg{display:none}
.guest-note{padding:0;border-radius:0;background:none;color:var(--ink-dim);font-size:14px;font-weight:500}

/* ---------- Game tiles (Figma: GameCard). Cover 3:4, title + category under it, cyan ring + play on hover ---------- */
.fz-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:24px 16px}
.fz-tile__art{border-radius:var(--radius-lg);box-shadow:none;background:var(--surface-2);overflow:visible}
.fz-tile__art:after{display:none}
.fz-tile__art svg.art{border-radius:var(--radius-lg)}
.fz-tile__title{position:absolute;top:100%;bottom:auto;left:0;right:0;margin-top:8px;padding:0 2px;text-align:left;text-shadow:none;background:none;
  font:700 15px/20px var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-tile__meta{padding:30px 2px 0;font-size:14px;line-height:20px;color:var(--ink-dim)}
.fz-tile__meta b{color:var(--ink-dim);font-weight:400}
.fz-tile__meta span{display:none}
.fz-tile:hover .fz-tile__art,.fz-tile:focus-visible .fz-tile__art{box-shadow:inset 0 0 0 2px var(--gold),var(--glow-cyan);transform:none}
.fz-tile:hover .fz-tile__title{color:var(--gold)}
.fz-tile:hover .fz-tile__art svg.art{transform:none}
.fz-tile__play{width:52px;height:52px;margin:-26px 0 0 -26px;background:var(--gold);box-shadow:var(--glow-cyan);border:0;top:50%}
.fz-badge{border-radius:var(--radius-sm);height:22px;padding:0 8px;font:700 12px/22px var(--font-body);letter-spacing:.01em;text-transform:none}
.promo-card .fz-badge{justify-self:start;width:fit-content}
.fz-badge--top{background:var(--coin);color:var(--on-coin)}
.fz-badge--new{background:var(--coral);color:var(--on-coin)}
.fz-badge--hot{background:var(--pink);color:var(--on-coin)}
.game-head .thumb{border-radius:var(--radius-lg);box-shadow:none}

/* ---------- Home: rows of games (horizontal, arrows + See all) ---------- */
.ot-row .fz-section__head .fz-spacer{flex:1}
.ot-row__ctrl{display:flex;align-items:center;gap:8px}
.ot-row__all{margin-right:8px;color:var(--ink-muted);font-size:14px;font-weight:700;text-decoration:none}
.ot-row__all:hover{color:var(--ink)}
.ot-row__btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);cursor:pointer}
.ot-row__btn:hover:not(:disabled){background:var(--surface-3)}
.ot-row__btn:disabled{opacity:.35;cursor:default}
.ot-row__btn svg{width:18px;height:18px}
.ot-row .fz-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 7 * 16px) / 8);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 8px;margin:-4px -2px -8px}
.ot-row .fz-grid::-webkit-scrollbar{display:none}
.ot-row .fz-tile{scroll-snap-align:start}
.ot-row .guest-note{display:none}
@media (max-width:1180px){.ot-row .fz-grid{grid-auto-columns:calc((100% - 5 * 16px) / 6)}}
@media (max-width:900px){.ot-row .fz-grid{grid-auto-columns:calc((100% - 3 * 12px) / 3.4);gap:12px}.ot-row__btn{display:none}}
@media (max-width:560px){.ot-row .fz-grid{grid-auto-columns:calc((100% - 2 * 12px) / 2.4)}}
@media (prefers-reduced-motion:reduce){.ot-row .fz-grid{scroll-behavior:auto}}

/* ---------- Home: category chips (Figma: Chip) ---------- */
.ot-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ot-cats a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-muted);font-size:14px;font-weight:600;text-decoration:none}
.ot-cats a:hover{background:var(--surface-3);color:var(--ink)}
.ot-cats a.is-on{background:var(--gold);color:var(--on-gold)}
.ot-cats b{font-weight:600;opacity:.7}
@media (max-width:900px){.ot-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}.ot-cats::-webkit-scrollbar{display:none}.ot-cats a{flex:none;height:36px;font-size:13px}}

/* ---------- Home: hero with the three shells (Figma: Hero + ShellPick) ---------- */
.ot-hero-wrap{display:grid;gap:32px}
.ot-hero{position:relative;display:grid;grid-template-columns:minmax(0,580fr) minmax(0,620fr);grid-template-areas:"copy stage";align-items:center;gap:24px 64px;padding:40px 0 8px}
.ot-hero__copy{grid-area:copy;display:grid;gap:32px;justify-items:start}
.ot-hero__head{display:grid;gap:20px}
.ot-hero h1{margin:0;font:800 clamp(36px,4vw,56px)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ot-hero__lead{margin:0;max-width:560px;color:var(--ink-muted);font-size:18px;line-height:28px}
.ot-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.ot-hero__cta .ot-signin{color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;padding:0 16px;height:56px;display:inline-flex;align-items:center;border-radius:var(--radius-md)}
.ot-hero__cta .ot-signin:hover{background:var(--surface-2)}
.ot-claim{display:none;white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:56px;padding:12px 28px}
.ot-hero.is-open .ot-register{display:none}
.ot-hero.is-open .ot-claim{display:inline-flex}
.ot-claim b{font-weight:inherit}
.ot-claim[hidden]{display:none!important}
.ot-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;color:var(--ink-dim);font-size:14px;line-height:20px}
.ot-facts li{display:inline-flex;align-items:center;gap:8px}
.ot-facts li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coin)}
.ot-error{margin:0;color:var(--coral);font-size:14px}
.ot-error[hidden]{display:none}
.ot-stage{grid-area:stage;position:relative;display:grid;justify-items:center;gap:16px}
.ot-stage:before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:560px;height:560px;max-width:100%;border-radius:50%;transform:translateX(-50%);background:#8a4dff47;filter:blur(110px);pointer-events:none}
.ot-otto{position:relative;display:block;width:250px;aspect-ratio:501/640;margin-bottom:-12px;user-select:none;animation:otFloat 6s ease-in-out infinite}
.ot-otto img{position:absolute;inset:0;width:100%;height:100%}
/* the raised tentacle is its own layer behind the body and turns around its base: a wave, a pause, again */
.ot-otto__arm{transform-origin:38.3% 58.1%;animation:otWave 5.5s ease-in-out 1s infinite}
@keyframes otWave{0%,46%,100%{transform:rotate(0)}8%{transform:rotate(-7deg)}17%{transform:rotate(5deg)}26%{transform:rotate(-6deg)}35%{transform:rotate(3deg)}}
@keyframes otFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ot-shells{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.ot-shell{display:grid;justify-items:center;align-content:end;gap:10px;width:200px;min-height:240px;padding:0;border:0;background:0 0;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-lg);animation:otBob 4.8s ease-in-out infinite;position:relative;isolation:isolate}
/* the glow is its own layer that only changes opacity, so the browser does not repaint the shell every frame */
.ot-shell:before{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:8%;height:62%;border-radius:50%;background:radial-gradient(closest-side,#2ff3e05c,#2ff3e000);opacity:.35;animation:otBreath 3.2s ease-in-out infinite;pointer-events:none}
.ot-shells li:nth-child(2) .ot-shell:before{animation-delay:-1.1s}.ot-shells li:nth-child(3) .ot-shell:before{animation-delay:-2.2s}
@keyframes otBreath{0%,100%{opacity:.35}50%{opacity:1}}
.ot-shells li:nth-child(2) .ot-shell{animation-delay:-1.6s}.ot-shells li:nth-child(3) .ot-shell{animation-delay:-3.2s}
.ot-shell img{display:block;width:180px;height:auto;transition:filter .3s ease}
/* closed shells breathe a soft cyan glow from the seam; on hover only the glow grows, nothing moves */
.ot-shell .ot-shell__closed{filter:drop-shadow(0 0 8px #2ff3e040)}
@keyframes otBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ot-shell .ot-shell__open{display:none}
.ot-shell__label{color:var(--ink-dim);font-size:14px;line-height:20px;font-weight:600}
.ot-shell:hover:not(:disabled),.ot-shell:focus-visible{animation-play-state:paused}
.ot-shell:hover:not(:disabled) .ot-shell__closed,.ot-shell:focus-visible .ot-shell__closed{filter:drop-shadow(0 0 26px #2ff3e0aa) brightness(1.08)}
.ot-shell:hover:not(:disabled):before,.ot-shell:focus-visible:before{animation:none;opacity:1}
.ot-shell:hover:not(:disabled) .ot-shell__label{color:var(--ink)}
.ot-shell__label{transition:color .2s ease}
.ot-shell:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.ot-shell:disabled{cursor:default}
.ot-hero.is-busy .ot-shell{cursor:progress}
.ot-shell.is-open .ot-shell__closed{display:none}
.ot-shell.is-open .ot-shell__open{display:block;filter:drop-shadow(0 0 24px #ffc93c80)}
.ot-hero.is-open .ot-shell{animation-play-state:paused}.ot-hero.is-open .ot-shell__closed{filter:none}.ot-hero.is-open .ot-shell:not(.is-open):before{display:none}
.ot-shell.is-open:before{background:radial-gradient(closest-side,#ffc93c73,#ffc93c00);animation-duration:3s}
.ot-shell.is-open .ot-shell__label{color:var(--coin);font:800 16px/22px var(--font-display);text-align:center}
.ot-hero.is-open .ot-shell:not(.is-open){opacity:.45}
.ot-shell.is-open .ot-shell__open{filter:drop-shadow(0 0 22px #ffc93c80);animation:otPop .5s cubic-bezier(.2,.7,.2,1)}
@keyframes otPop{from{transform:scale(.85)}}
.ot-stage__note{margin:0;max-width:560px;text-align:center;color:var(--ink-dim);font-size:14px;line-height:20px}
.ot-odds{max-width:560px;color:var(--ink-dim);font-size:13px;line-height:19px;text-align:center}
.ot-odds summary{cursor:pointer;color:var(--ink-muted);font-weight:600;list-style:none}
.ot-odds summary::-webkit-details-marker{display:none}
.ot-odds summary:hover{color:var(--ink)}
.ot-odds p{margin:8px 0 0}
@media (prefers-reduced-motion:reduce){.ot-otto,.ot-otto__arm,.ot-shell,.ot-shell:before,.ot-shell img,.ot-shell.is-open .ot-shell__open{animation:none!important}.ot-shell img{transition:none}}
@media (max-width:1100px){.ot-hero{gap:24px 32px}.ot-shell{width:160px;min-height:200px}.ot-shell img{width:148px}.ot-otto{width:210px}}
@media (max-width:900px){
  .ot-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:none;padding:16px 0 0;justify-items:center;text-align:center}
  .ot-hero__copy,.ot-hero__head{display:contents}
  .ot-hero h1{order:1;font-size:clamp(30px,8.4vw,40px)}
  .ot-stage{order:2;width:100%;grid-area:auto}
  .ot-hero__cta{order:3;width:100%;flex-direction:column;gap:8px}
  .ot-hero__cta .fz-btn{width:100%}
  .ot-error{order:4}
  .ot-hero__lead{order:5;font-size:16px;line-height:24px}
  .ot-facts{order:6;justify-content:center;gap:6px 16px}
  .ot-otto{width:170px;margin-bottom:-8px}
  .ot-shells{gap:2px}
  .ot-shell{width:31vw;max-width:150px;min-height:0;gap:6px}
  .ot-shell img{width:100%}
  .ot-shell__label{font-size:12px;line-height:16px}
  .ot-shell.is-open .ot-shell__label{font-size:13px;line-height:17px}
  .ot-stage:before{width:340px;height:340px;filter:blur(80px)}
}

/* ---------- Home: why players dive in (Figma: FeatureItem, no background) ---------- */
.ot-why{display:grid;gap:40px;justify-items:center;padding-top:16px}
.ot-why h2{margin:0;font:700 34px/40px var(--font-display);letter-spacing:-.01em;text-align:center}
.ot-why__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;width:100%;margin:0;padding:0;list-style:none}
.ot-why__item{display:grid;justify-items:center;align-content:start;gap:12px;text-align:center}
.ot-why__item img{width:150px;height:150px;object-fit:contain;animation:otFloat 6s ease-in-out infinite}
.ot-why__item:nth-child(2) img{animation-delay:-2s}.ot-why__item:nth-child(3) img{animation-delay:-4s}
.ot-why__item h3{margin:0;font:600 20px/26px var(--font-display)}
.ot-why__item p{margin:0;max-width:360px;color:var(--ink-muted);font-size:16px;line-height:24px}
@media (max-width:900px){.ot-why h2{font-size:26px;line-height:32px}.ot-why__items{grid-template-columns:minmax(0,1fr);gap:28px}.ot-why__item img{width:120px;height:120px}}

/* ---------- Home: join banner (the block that keeps a background) ---------- */
.ot-join{position:relative;display:grid;align-content:center;justify-items:start;gap:16px;min-height:400px;padding:48px 64px;border-radius:var(--radius-xl);overflow:hidden;
  background:#0b1430 right center/cover no-repeat}
/* the picture loads when the banner comes near the screen (otto.js adds "cv"); without JS it loads straight away */
.ot-join.cv,html:not(.js) .ot-join{background-image:url(/img/banners/guest-desktop.webp)}
.ot-join h2{margin:0;max-width:520px;font:800 44px/50px var(--font-display);letter-spacing:-.015em}
.ot-join p{margin:0 0 8px;color:var(--ink-muted);font-size:18px;line-height:28px}
@media (max-width:900px){
  .ot-join{min-height:0;padding:28px 20px 300px;justify-items:center;text-align:center;background:#0b1430}
  .ot-join.cv,html:not(.js) .ot-join{background-image:none}
  .ot-join.cv:before,html:not(.js) .ot-join:before{background-image:url(/img/banners/guest-mobile.webp)}
  .ot-join:before{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;aspect-ratio:1;background:center/cover no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
  .ot-join>*{position:relative;z-index:1}
  .ot-join h2{font-size:30px;line-height:36px}
  .ot-join .fz-btn{width:100%}
}
@media (max-width:480px){.ot-join{padding-bottom:calc(100vw - 32px)}}

/* ---------- Home: about text + FAQ ---------- */
.article{border-top:0;padding-top:0;gap:64px}
.article h2{font:700 28px/34px var(--font-display);margin:0 0 16px}
.article h3{font:600 20px/26px var(--font-display);margin:24px 0 8px}
.article p{color:var(--ink-muted);font-size:16px;line-height:24px}

/* ---------- Home: closing call to action ---------- */
.ot-close{display:grid;justify-items:center;gap:20px;padding:24px 0 8px;text-align:center}
.ot-close img{width:64px;height:auto;animation:otFloat 5s ease-in-out infinite}
.ot-close h2{margin:0;font:700 34px/40px var(--font-display);letter-spacing:-.01em}
.ot-close p{margin:0;max-width:640px;color:var(--ink-muted);font-size:18px;line-height:28px}
@media (max-width:900px){.ot-close h2{font-size:26px;line-height:32px}.ot-close .fz-btn{width:100%}}

/* ---------- /login/ and /register/: the form on the page ---------- */
.auth-page{display:grid;justify-items:center;padding:32px 0 48px}
.auth-page__card.modal{margin:0 auto;box-shadow:none;background:none;border:0}
@media (max-width:900px){.auth-page{padding:16px 0 32px}}

/* ---------- Section pages for visitors ---------- */
.guest-section{display:grid;gap:12px;max-width:900px;margin:0 0 8px}
.guest-section h1{font:800 clamp(30px,3.6vw,44px)/1.1 var(--font-display);letter-spacing:-.015em;margin:0}
.guest-section p{color:var(--ink-muted);margin:0;font-size:16px;line-height:24px}
.guest-section--signin{padding:0;border:0;background:none}
.guest-section__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.legal h1{font:800 clamp(30px,3.6vw,44px)/1.1 var(--font-display);letter-spacing:-.015em}
.legal h2{font:700 22px/28px var(--font-display);margin-top:32px}
.legal .box{background:none;border:0;border-left:3px solid var(--gold);border-radius:0;padding:4px 0 4px 16px}

/* ---------- Footer (Figma: Footer) ---------- */
.fz-footer{background:none;border-top:1px solid var(--line);box-shadow:none;padding:64px max(24px,calc((100% - var(--page))/2)) 40px;gap:40px;color:var(--ink-dim);font-size:14px;line-height:20px}
.fz-footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px 64px}
.fz-footer__brand{display:grid;gap:20px;max-width:340px}
.fz-footer__brand img{height:48px;width:auto}
.fz-footer__brand p{margin:0}
.fz-footer__cols{flex:none;display:flex;gap:24px 64px}
.fz-footer__col{gap:12px}
.fz-footer__col b{color:var(--ink);font:700 15px/20px var(--font-body);margin-bottom:0}
.fz-footer__col a{color:var(--ink-muted);font-size:14px}
.fz-footer__col a:hover{color:var(--ink)}
.fz-footer__legal{display:grid;gap:24px;border-top:1px solid var(--line);padding-top:32px}
.fz-footer__notice{display:flex;align-items:flex-start;gap:20px}
.fz-footer__notice p{margin:0;max-width:980px}
.fz-footer .fz-badge--age{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;background:0 0;border:2px solid var(--coin);color:var(--coin);font:800 12px/1 var(--font-body)}
.fz-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.fz-footer__bottom p{margin:0}
.fz-footer__bottom nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.fz-footer__bottom a{color:var(--ink-muted);font-weight:600;text-decoration:none}
.fz-footer__bottom a:hover{color:var(--ink)}
@media (max-width:900px){.fz-footer{padding:40px 16px 28px;gap:28px}.fz-footer__top{flex-direction:column}.fz-footer__cols{flex-wrap:wrap}}
@media (max-width:560px){.fz-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;width:100%}}

/* ---------- Sign-up card (bottom right; full width on phones). Owner's request: soft pulse on the button,
   with a reduced-motion variant. Hidden for signed-in players, on sign-in/sign-up pages, on the lock screen and after closing. ---------- */
.guest-bar{position:fixed;z-index:65;right:24px;bottom:24px;width:340px;font-family:var(--font-body);
  background:var(--surface-2);border:1px solid #2ff3e066;border-radius:var(--radius-lg);box-shadow:0 0 18px #2ff3e033;animation:otIn .45s ease-out both}
.guest-bar:before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 3px #2ff3e02e,0 0 34px #2ff3e080;opacity:0;animation:otBreath 2.6s ease-in-out .45s infinite;pointer-events:none}
@keyframes otIn{from{opacity:0;transform:translateY(12px)}}
.guest-bar__btn{position:relative;overflow:hidden;animation:otPulse 2.6s ease-in-out infinite}
.guest-bar__btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff8c,transparent);animation:otShine 3s ease-in-out infinite}
@keyframes otPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes otShine{0%,55%{transform:translateX(0) skewX(-20deg)}85%,100%{transform:translateX(475%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.guest-bar,.guest-bar:before,.guest-bar__btn,.guest-bar__btn:after{animation:none}.guest-bar__btn:after{display:none}.guest-bar{box-shadow:0 0 24px #2ff3e04d}}
.guest-bar__card{display:block;color:var(--ink);text-decoration:none;border-radius:var(--radius-lg)}
.guest-bar__card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.guest-bar__in{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"gift text" "btn btn";gap:12px;padding:16px}
.guest-bar__gift{grid-area:gift;display:grid;place-items:center;width:44px;height:44px}
.guest-bar__gift img{width:44px;height:auto}
.guest-bar__text{grid-area:text;display:flex;flex-direction:column;gap:3px;line-height:1.25;min-width:0;padding-right:28px}
.guest-bar__title{font-weight:700;font-size:15px}
.guest-bar__sub{color:var(--ink-dim);font-size:12px;font-weight:500}
.guest-bar__btn{grid-area:btn;display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:var(--radius-md);background:var(--gold);color:var(--on-gold);font-weight:700;font-size:14px;white-space:nowrap}
.guest-bar__card:hover .guest-bar__btn{background:var(--gold-light)}
.guest-bar__close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface-3);color:var(--ink-muted);font-size:18px;line-height:1;cursor:pointer}
.guest-bar__close:hover{color:var(--ink)}
.guest-bar-shade{display:none}
html.has-accounts:not(.is-guest) :is(.guest-bar,.guest-bar-shade),html.ot-auth-page :is(.guest-bar,.guest-bar-shade),
html.ot-gb-closed :is(.guest-bar,.guest-bar-shade),html.is-locked :is(.guest-bar,.guest-bar-shade){display:none}
@media (max-width:640px){
  .guest-bar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto}
  .guest-bar__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "btn";gap:10px;padding:12px 14px}
  .guest-bar__gift{display:none}
  .guest-bar__text{padding-right:36px}
  .guest-bar__title{font-size:14px}.guest-bar__sub{font-size:11px}
  .guest-bar__btn{height:40px;padding:0 14px;font-size:13px}
  html:not(.ot-auth-page):not(.ot-gb-closed):not(.is-locked):not(.has-accounts:not(.is-guest)) body{padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))!important}
}

/* ---------- 21+ question (once per browser) ---------- */
html.ot-age-open body{overflow:hidden}
.ot-age{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:#080d24f2}
.ot-age__card{display:grid;gap:16px;justify-items:start;width:min(480px,100%);padding:32px;border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--line-strong)}
.ot-age__card img{width:72px;height:auto}
.ot-age h2{font:800 clamp(24px,3.6vw,30px)/1.15 var(--font-display);margin:0}
.ot-age p{margin:0;color:var(--ink-muted);font-size:15px;line-height:22px}
.ot-age__btns{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-top:4px}
.ot-age__btns[hidden],.ot-age__no[hidden]{display:none}
.ot-age__btns .fz-btn{flex:1 1 160px;justify-content:center}
.ot-age small{color:var(--ink-dim);font-size:12px}
.ot-age small a{color:var(--ink-muted);margin-right:12px}

.ot-nw{white-space:nowrap}
.ot-row,.ot-why{scroll-margin-top:96px}

/* ---------- No movement on hover anywhere: only glow, fill and colour change ---------- */
.fz-btn:hover:not(:disabled),.fz-btn:active,.fz-btn:active:not(:disabled),.fz-btn--gold:active,.btn:hover:not(:disabled),.btn:active:not(:disabled),
.fz-tab:hover,.fz-arrow:hover:not(:disabled),.fz-avatar:hover,.fz-tile__fav:hover,.promo-card:hover,.guest-feat:hover,.safe-break:hover,
.side-promo-mini:hover,.spot:hover:not(:disabled),.kn:hover:not(:disabled),.mt:hover:not(:disabled),.vp-cards .card:not(.held):hover,
.slot-spin:hover:not(:disabled),.slot-spin:active:not(:disabled),.fz-bottomnav__main:hover .c{transform:none}
.vp-cards .card.held:hover{transform:translateY(-8px)}
.fz-tile__play,.fz-tile:hover .fz-tile__play{transform:none}
.fz-btn:active:not(:disabled){filter:brightness(.92)}
.fz-tile .fz-tile__art{transition:box-shadow .2s ease}
.ot-cats a,.ot-row__btn{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.ot-cats a:hover{box-shadow:0 0 0 1px var(--gold) inset}
/* the Otto mark is 187x240: never squeeze it into a square box */
img[src$="otto-mark.webp"],img[src$="otto-mark-512.webp"]{object-fit:contain}

/* ---------- Congratulations window after a shell opens (a floating window, so it has a background) ---------- */
html.ot-yay-open body{overflow:hidden}
.ot-yay{width:min(440px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;background:none;color:var(--ink);overflow:visible}
.ot-yay::backdrop{background:#080d24d9;backdrop-filter:blur(4px);animation:otFade .25s ease}
.ot-yay__card{position:relative;display:grid;justify-items:center;gap:12px;padding:8px 28px 24px;text-align:center;border-radius:var(--radius-xl);
  background:radial-gradient(120% 70% at 50% 0%,#8a4dff38,transparent 70%),var(--surface);border:1px solid var(--line-strong);box-shadow:0 30px 80px #0009;
  animation:otRise .4s cubic-bezier(.2,.8,.2,1)}
.ot-yay__x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink-muted);cursor:pointer;transition:background .2s ease,color .2s ease}
.ot-yay__x:hover{background:var(--surface-3);color:var(--ink)}
.ot-yay__x svg{width:20px;height:20px}
.ot-yay__art{position:relative;display:grid;place-items:center;width:200px;height:190px;margin-top:-56px}
.ot-yay__art img{position:relative;width:180px;height:auto;filter:drop-shadow(0 0 30px #ffc93c8c);animation:otPop .5s cubic-bezier(.2,.7,.2,1)}
.ot-yay__glow{position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,#ffc93c59,transparent 65%);animation:otHalo 3s ease-in-out infinite}
.ot-yay__coin{position:absolute;left:50%;top:55%;width:26px;height:26px;margin:-13px 0 0 -13px;background:url(/assets/coin-128-otto.webp) center/contain no-repeat;opacity:0;
  animation:otCoin 1.3s cubic-bezier(.15,.7,.3,1) var(--d) forwards}
.ot-yay h2{margin:4px 0 0;font:800 30px/36px var(--font-display);letter-spacing:-.01em}
.ot-yay__amt{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--coin);font:800 24px/30px var(--font-display)}
.ot-yay__amt .fz-coin{width:28px;height:28px}
.ot-yay p{margin:0;max-width:360px;color:var(--ink-muted);font-size:15px;line-height:22px}
.ot-yay__btns{display:grid;gap:8px;width:100%;margin-top:8px}
.ot-yay__btns .fz-btn{width:100%;justify-content:center}
.ot-yay small{color:var(--ink-dim);font-size:12px;line-height:17px}
@keyframes otRise{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes otFade{from{opacity:0}}
@keyframes otHalo{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes otCoin{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 60px)) rotate(var(--r)) scale(1)}}
@media (max-width:480px){.ot-yay__card{padding:8px 20px 20px}.ot-yay h2{font-size:26px;line-height:32px}.ot-yay__amt{font-size:21px}}
@media (prefers-reduced-motion:reduce){.ot-yay__card,.ot-yay::backdrop,.ot-yay__art img,.ot-yay__glow{animation:none}.ot-yay__coin{display:none}}

/* pictures cannot be dragged out of the page (draggable="false" is also set on every <img>) */
img{-webkit-user-drag:none;user-select:none}

/* blocks below the first screen are laid out and painted only when they come near it (big saving on phones) */
.ot-row:not(.ot-row--top){content-visibility:auto;contain-intrinsic-size:auto 360px}
.ot-why{content-visibility:auto;contain-intrinsic-size:auto 520px}
.ot-join{content-visibility:auto;contain-intrinsic-size:auto 470px}
.app-main>.article{content-visibility:auto;contain-intrinsic-size:auto 900px}
.ot-close{content-visibility:auto;contain-intrinsic-size:auto 340px}
.fz-footer{content-visibility:auto;contain-intrinsic-size:auto 460px}
@media (max-width:900px){.ot-why{contain-intrinsic-size:auto 1100px}.ot-join{contain-intrinsic-size:auto 760px}.app-main>.article{contain-intrinsic-size:auto 1900px}.fz-footer{contain-intrinsic-size:auto 900px}}

/* Game covers (written by tools/build.py from /img/games/) */
html:not(.js) .tile-link[href="/play/baccarat/"] .fz-tile__art,.tile-link.cv[href="/play/baccarat/"] .fz-tile__art,html[data-game="baccarat"] .game-head .thumb{background:#060a0e url(/img/games/baccarat.webp) center/cover no-repeat}
.tile-link[href="/play/baccarat/"] .fz-tile__art svg.art,html[data-game="baccarat"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/bingo/"] .fz-tile__art,.tile-link.cv[href="/play/bingo/"] .fz-tile__art,html[data-game="bingo"] .game-head .thumb{background:#060a0e url(/img/games/bingo.webp) center/cover no-repeat}
.tile-link[href="/play/bingo/"] .fz-tile__art svg.art,html[data-game="bingo"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/blackjack/"] .fz-tile__art,.tile-link.cv[href="/play/blackjack/"] .fz-tile__art,html[data-game="blackjack"] .game-head .thumb{background:#060a0e url(/img/games/blackjack.webp) center/cover no-repeat}
.tile-link[href="/play/blackjack/"] .fz-tile__art svg.art,html[data-game="blackjack"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/blazing-fruits/"] .fz-tile__art,.tile-link.cv[href="/play/blazing-fruits/"] .fz-tile__art,html[data-game="blazing-fruits"] .game-head .thumb{background:#060a0e url(/img/games/blazing-fruits.webp) center/cover no-repeat}
.tile-link[href="/play/blazing-fruits/"] .fz-tile__art svg.art,html[data-game="blazing-fruits"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/cactus-gold/"] .fz-tile__art,.tile-link.cv[href="/play/cactus-gold/"] .fz-tile__art,html[data-game="cactus-gold"] .game-head .thumb{background:#060a0e url(/img/games/cactus-gold.webp) center/cover no-repeat}
.tile-link[href="/play/cactus-gold/"] .fz-tile__art svg.art,html[data-game="cactus-gold"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/casino-war/"] .fz-tile__art,.tile-link.cv[href="/play/casino-war/"] .fz-tile__art,html[data-game="casino-war"] .game-head .thumb{background:#060a0e url(/img/games/casino-war.webp) center/cover no-repeat}
.tile-link[href="/play/casino-war/"] .fz-tile__art svg.art,html[data-game="casino-war"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/coin-flip/"] .fz-tile__art,.tile-link.cv[href="/play/coin-flip/"] .fz-tile__art,html[data-game="coin-flip"] .game-head .thumb{background:#060a0e url(/img/games/coin-flip.webp) center/cover no-repeat}
.tile-link[href="/play/coin-flip/"] .fz-tile__art svg.art,html[data-game="coin-flip"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/coral-reef/"] .fz-tile__art,.tile-link.cv[href="/play/coral-reef/"] .fz-tile__art,html[data-game="coral-reef"] .game-head .thumb{background:#060a0e url(/img/games/coral-reef.webp) center/cover no-repeat}
.tile-link[href="/play/coral-reef/"] .fz-tile__art svg.art,html[data-game="coral-reef"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/craps/"] .fz-tile__art,.tile-link.cv[href="/play/craps/"] .fz-tile__art,html[data-game="craps"] .game-head .thumb{background:#060a0e url(/img/games/craps.webp) center/cover no-repeat}
.tile-link[href="/play/craps/"] .fz-tile__art svg.art,html[data-game="craps"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/desert-dynasty/"] .fz-tile__art,.tile-link.cv[href="/play/desert-dynasty/"] .fz-tile__art,html[data-game="desert-dynasty"] .game-head .thumb{background:#060a0e url(/img/games/desert-dynasty.webp) center/cover no-repeat}
.tile-link[href="/play/desert-dynasty/"] .fz-tile__art svg.art,html[data-game="desert-dynasty"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/deuces-wild/"] .fz-tile__art,.tile-link.cv[href="/play/deuces-wild/"] .fz-tile__art,html[data-game="deuces-wild"] .game-head .thumb{background:#060a0e url(/img/games/deuces-wild.webp) center/cover no-repeat}
.tile-link[href="/play/deuces-wild/"] .fz-tile__art svg.art,html[data-game="deuces-wild"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/diamond-deluxe/"] .fz-tile__art,.tile-link.cv[href="/play/diamond-deluxe/"] .fz-tile__art,html[data-game="diamond-deluxe"] .game-head .thumb{background:#060a0e url(/img/games/diamond-deluxe.webp) center/cover no-repeat}
.tile-link[href="/play/diamond-deluxe/"] .fz-tile__art svg.art,html[data-game="diamond-deluxe"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/dragon-tiger/"] .fz-tile__art,.tile-link.cv[href="/play/dragon-tiger/"] .fz-tile__art,html[data-game="dragon-tiger"] .game-head .thumb{background:#060a0e url(/img/games/dragon-tiger.webp) center/cover no-repeat}
.tile-link[href="/play/dragon-tiger/"] .fz-tile__art svg.art,html[data-game="dragon-tiger"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/european-roulette/"] .fz-tile__art,.tile-link.cv[href="/play/european-roulette/"] .fz-tile__art,html[data-game="european-roulette"] .game-head .thumb{background:#060a0e url(/img/games/european-roulette.webp) center/cover no-repeat}
.tile-link[href="/play/european-roulette/"] .fz-tile__art svg.art,html[data-game="european-roulette"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/fortress-gold/"] .fz-tile__art,.tile-link.cv[href="/play/fortress-gold/"] .fz-tile__art,html[data-game="fortress-gold"] .game-head .thumb{background:#060a0e url(/img/games/fortress-gold.webp) center/cover no-repeat}
.tile-link[href="/play/fortress-gold/"] .fz-tile__art svg.art,html[data-game="fortress-gold"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/fortune-wheel/"] .fz-tile__art,.tile-link.cv[href="/play/fortune-wheel/"] .fz-tile__art,html[data-game="fortune-wheel"] .game-head .thumb{background:#060a0e url(/img/games/fortune-wheel.webp) center/cover no-repeat}
.tile-link[href="/play/fortune-wheel/"] .fz-tile__art svg.art,html[data-game="fortune-wheel"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/frost-crown/"] .fz-tile__art,.tile-link.cv[href="/play/frost-crown/"] .fz-tile__art,html[data-game="frost-crown"] .game-head .thumb{background:#060a0e url(/img/games/frost-crown.webp) center/cover no-repeat}
.tile-link[href="/play/frost-crown/"] .fz-tile__art svg.art,html[data-game="frost-crown"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/gem-rush/"] .fz-tile__art,.tile-link.cv[href="/play/gem-rush/"] .fz-tile__art,html[data-game="gem-rush"] .game-head .thumb{background:#060a0e url(/img/games/gem-rush.webp) center/cover no-repeat}
.tile-link[href="/play/gem-rush/"] .fz-tile__art svg.art,html[data-game="gem-rush"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/gem-vault/"] .fz-tile__art,.tile-link.cv[href="/play/gem-vault/"] .fz-tile__art,html[data-game="gem-vault"] .game-head .thumb{background:#060a0e url(/img/games/gem-vault.webp) center/cover no-repeat}
.tile-link[href="/play/gem-vault/"] .fz-tile__art svg.art,html[data-game="gem-vault"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/hi-lo/"] .fz-tile__art,.tile-link.cv[href="/play/hi-lo/"] .fz-tile__art,html[data-game="hi-lo"] .game-head .thumb{background:#060a0e url(/img/games/hi-lo.webp) center/cover no-repeat}
.tile-link[href="/play/hi-lo/"] .fz-tile__art svg.art,html[data-game="hi-lo"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/jacks-or-better/"] .fz-tile__art,.tile-link.cv[href="/play/jacks-or-better/"] .fz-tile__art,html[data-game="jacks-or-better"] .game-head .thumb{background:#060a0e url(/img/games/jacks-or-better.webp) center/cover no-repeat}
.tile-link[href="/play/jacks-or-better/"] .fz-tile__art svg.art,html[data-game="jacks-or-better"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/jungle-trail/"] .fz-tile__art,.tile-link.cv[href="/play/jungle-trail/"] .fz-tile__art,html[data-game="jungle-trail"] .game-head .thumb{background:#060a0e url(/img/games/jungle-trail.webp) center/cover no-repeat}
.tile-link[href="/play/jungle-trail/"] .fz-tile__art svg.art,html[data-game="jungle-trail"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/keno/"] .fz-tile__art,.tile-link.cv[href="/play/keno/"] .fz-tile__art,html[data-game="keno"] .game-head .thumb{background:#060a0e url(/img/games/keno.webp) center/cover no-repeat}
.tile-link[href="/play/keno/"] .fz-tile__art svg.art,html[data-game="keno"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/limbo/"] .fz-tile__art,.tile-link.cv[href="/play/limbo/"] .fz-tile__art,html[data-game="limbo"] .game-head .thumb{background:#060a0e url(/img/games/limbo.webp) center/cover no-repeat}
.tile-link[href="/play/limbo/"] .fz-tile__art svg.art,html[data-game="limbo"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/lucky-clover/"] .fz-tile__art,.tile-link.cv[href="/play/lucky-clover/"] .fz-tile__art,html[data-game="lucky-clover"] .game-head .thumb{background:#060a0e url(/img/games/lucky-clover.webp) center/cover no-repeat}
.tile-link[href="/play/lucky-clover/"] .fz-tile__art svg.art,html[data-game="lucky-clover"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/lucky-number/"] .fz-tile__art,.tile-link.cv[href="/play/lucky-number/"] .fz-tile__art,html[data-game="lucky-number"] .game-head .thumb{background:#060a0e url(/img/games/lucky-number.webp) center/cover no-repeat}
.tile-link[href="/play/lucky-number/"] .fz-tile__art svg.art,html[data-game="lucky-number"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/mini-roulette/"] .fz-tile__art,.tile-link.cv[href="/play/mini-roulette/"] .fz-tile__art,html[data-game="mini-roulette"] .game-head .thumb{background:#060a0e url(/img/games/mini-roulette.webp) center/cover no-repeat}
.tile-link[href="/play/mini-roulette/"] .fz-tile__art svg.art,html[data-game="mini-roulette"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/mystic-moon/"] .fz-tile__art,.tile-link.cv[href="/play/mystic-moon/"] .fz-tile__art,html[data-game="mystic-moon"] .game-head .thumb{background:#060a0e url(/img/games/mystic-moon.webp) center/cover no-repeat}
.tile-link[href="/play/mystic-moon/"] .fz-tile__art svg.art,html[data-game="mystic-moon"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/nebula-spins/"] .fz-tile__art,.tile-link.cv[href="/play/nebula-spins/"] .fz-tile__art,html[data-game="nebula-spins"] .game-head .thumb{background:#060a0e url(/img/games/nebula-spins.webp) center/cover no-repeat}
.tile-link[href="/play/nebula-spins/"] .fz-tile__art svg.art,html[data-game="nebula-spins"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/neon-jam/"] .fz-tile__art,.tile-link.cv[href="/play/neon-jam/"] .fz-tile__art,html[data-game="neon-jam"] .game-head .thumb{background:#060a0e url(/img/games/neon-jam.webp) center/cover no-repeat}
.tile-link[href="/play/neon-jam/"] .fz-tile__art svg.art,html[data-game="neon-jam"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/orchard-classic/"] .fz-tile__art,.tile-link.cv[href="/play/orchard-classic/"] .fz-tile__art,html[data-game="orchard-classic"] .game-head .thumb{background:#060a0e url(/img/games/orchard-classic.webp) center/cover no-repeat}
.tile-link[href="/play/orchard-classic/"] .fz-tile__art svg.art,html[data-game="orchard-classic"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/peg-drop/"] .fz-tile__art,.tile-link.cv[href="/play/peg-drop/"] .fz-tile__art,html[data-game="peg-drop"] .game-head .thumb{background:#060a0e url(/img/games/peg-drop.webp) center/cover no-repeat}
.tile-link[href="/play/peg-drop/"] .fz-tile__art svg.art,html[data-game="peg-drop"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/red-dog/"] .fz-tile__art,.tile-link.cv[href="/play/red-dog/"] .fz-tile__art,html[data-game="red-dog"] .game-head .thumb{background:#060a0e url(/img/games/red-dog.webp) center/cover no-repeat}
.tile-link[href="/play/red-dog/"] .fz-tile__art svg.art,html[data-game="red-dog"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/rocket-rise/"] .fz-tile__art,.tile-link.cv[href="/play/rocket-rise/"] .fz-tile__art,html[data-game="rocket-rise"] .game-head .thumb{background:#060a0e url(/img/games/rocket-rise.webp) center/cover no-repeat}
.tile-link[href="/play/rocket-rise/"] .fz-tile__art svg.art,html[data-game="rocket-rise"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/safe-tiles/"] .fz-tile__art,.tile-link.cv[href="/play/safe-tiles/"] .fz-tile__art,html[data-game="safe-tiles"] .game-head .thumb{background:#060a0e url(/img/games/safe-tiles.webp) center/cover no-repeat}
.tile-link[href="/play/safe-tiles/"] .fz-tile__art svg.art,html[data-game="safe-tiles"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/sakura-dream/"] .fz-tile__art,.tile-link.cv[href="/play/sakura-dream/"] .fz-tile__art,html[data-game="sakura-dream"] .game-head .thumb{background:#060a0e url(/img/games/sakura-dream.webp) center/cover no-repeat}
.tile-link[href="/play/sakura-dream/"] .fz-tile__art svg.art,html[data-game="sakura-dream"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/scratch-card/"] .fz-tile__art,.tile-link.cv[href="/play/scratch-card/"] .fz-tile__art,html[data-game="scratch-card"] .game-head .thumb{background:#060a0e url(/img/games/scratch-card.webp) center/cover no-repeat}
.tile-link[href="/play/scratch-card/"] .fz-tile__art svg.art,html[data-game="scratch-card"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/sic-bo/"] .fz-tile__art,.tile-link.cv[href="/play/sic-bo/"] .fz-tile__art,html[data-game="sic-bo"] .game-head .thumb{background:#060a0e url(/img/games/sic-bo.webp) center/cover no-repeat}
.tile-link[href="/play/sic-bo/"] .fz-tile__art svg.art,html[data-game="sic-bo"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/three-card-poker/"] .fz-tile__art,.tile-link.cv[href="/play/three-card-poker/"] .fz-tile__art,html[data-game="three-card-poker"] .game-head .thumb{background:#060a0e url(/img/games/three-card-poker.webp) center/cover no-repeat}
.tile-link[href="/play/three-card-poker/"] .fz-tile__art svg.art,html[data-game="three-card-poker"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/thunder-hammer/"] .fz-tile__art,.tile-link.cv[href="/play/thunder-hammer/"] .fz-tile__art,html[data-game="thunder-hammer"] .game-head .thumb{background:#060a0e url(/img/games/thunder-hammer.webp) center/cover no-repeat}
.tile-link[href="/play/thunder-hammer/"] .fz-tile__art svg.art,html[data-game="thunder-hammer"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/tower/"] .fz-tile__art,.tile-link.cv[href="/play/tower/"] .fz-tile__art,html[data-game="tower"] .game-head .thumb{background:#060a0e url(/img/games/tower.webp) center/cover no-repeat}
.tile-link[href="/play/tower/"] .fz-tile__art svg.art,html[data-game="tower"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/treasure-cove/"] .fz-tile__art,.tile-link.cv[href="/play/treasure-cove/"] .fz-tile__art,html[data-game="treasure-cove"] .game-head .thumb{background:#060a0e url(/img/games/treasure-cove.webp) center/cover no-repeat}
.tile-link[href="/play/treasure-cove/"] .fz-tile__art svg.art,html[data-game="treasure-cove"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/triple-sevens/"] .fz-tile__art,.tile-link.cv[href="/play/triple-sevens/"] .fz-tile__art,html[data-game="triple-sevens"] .game-head .thumb{background:#060a0e url(/img/games/triple-sevens.webp) center/cover no-repeat}
.tile-link[href="/play/triple-sevens/"] .fz-tile__art svg.art,html[data-game="triple-sevens"] .game-head .thumb>svg{visibility:hidden}
html:not(.js) .tile-link[href="/play/volcano-rush/"] .fz-tile__art,.tile-link.cv[href="/play/volcano-rush/"] .fz-tile__art,html[data-game="volcano-rush"] .game-head .thumb{background:#060a0e url(/img/games/volcano-rush.webp) center/cover no-repeat}
.tile-link[href="/play/volcano-rush/"] .fz-tile__art svg.art,html[data-game="volcano-rush"] .game-head .thumb>svg{visibility:hidden}