@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Inter:wght@400;700&family=Orbitron:wght@900&family=Space+Mono:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  --ink: #131313;
  --cream: #ede6d6;
  --gold: #f0c75e;
  --yellow: #facc15;
  --red: #ff1738;
  --rose: #ff4b5c;
  --stage-scale: 1;
}

/* Casino lobby — matched to the selected Figma catalogue screen */
.casino-shell.lobby {
  --header-height: 74px;
  --sidebar-width: 296px;
  display: block;
  min-width: 1060px;
  min-height: 100vh;
  overflow-x: hidden;
  color: #ede6d6;
  background-color: #080b0d;
  background-image:
    radial-gradient(900px 492px at 15% -10%, rgba(23,88,67,.3) 0%, transparent 60%),
    radial-gradient(700px 492px at 100% 0%, rgba(155,27,48,.12) 0%, transparent 55%);
  font-family: "Manrope", Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: none;
}

.casino-shell.lobby[hidden] { display: none; }
.casino-shell.lobby.is-visible { opacity: 1; visibility: visible; }
html.casino-open, body.casino-open { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.lobby *, .lobby *::before, .lobby *::after { box-sizing: border-box; }
.lobby button, .lobby input { font: inherit; }
.lobby a { color: inherit; text-decoration: none; }

.lobby-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 40px 0 24px;
  border-bottom: 1px solid rgba(201,162,39,.16);
  background: rgba(10,14,19,.92);
  backdrop-filter: blur(7px);
}

.lobby-brand-cluster { display:flex; min-width:0; align-items:center; gap:10px; }
.mobile-menu-button,.sidebar-mobile-head,.sidebar-mobile-backdrop { display:none; }
.lobby-brand { display: inline-flex; align-items: center; gap: 12px; color: #ede6d6; font-size: 22px; font-weight: 600; letter-spacing: -0.6px; }
.lobby-brand b { color: #f0c75e; font-weight: 600; }
.lobby-brand-mark { position: relative; display: grid; width: 28px; height: 28px; place-items: center; overflow: hidden; border-radius: 50%; background: #0b1117; box-shadow: 0 0 0 1px #2b343d; }
.lobby-brand-mark::before, .lobby-brand-mark::after { content: ""; position: absolute; left: 9px; width: 10px; height: 10px; transform: rotate(45deg); }
.lobby-brand-mark::before { top: 5px; background: #9b1b30; }
.lobby-brand-mark::after { bottom: 5px; background: #0263a8; }
.lobby-brand-mark i { position: relative; z-index: 2; width: 3px; height: 16px; background: #f2b71d; }

.lobby-actions { display: flex; align-items: center; gap: 10px; }
.logout-form { margin: 0; }
.header-link, .account-button { height:46px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #34414d; border-radius:9px; text-decoration:none; font-size:14px; font-weight:700; }
.header-link.login-button { padding:0 18px; color:#ede6d6; background:#080f16; }
.header-link.signup-button { padding:0 18px; }
.account-button { max-width:150px; padding:0 16px; overflow:hidden; color:#e8c55c; background:rgba(213,180,79,.08); border-color:rgba(213,180,79,.32); text-overflow:ellipsis; white-space:nowrap; }
.lobby-actions button, .lobby-search { height: 46px; border: 1px solid #34414d; border-radius: 9px; }
.lobby-search { display: flex; align-items: center; width: 268px; padding: 0 13px; gap: 8px; color: #a9a296; background: #1a2330; }
.lobby-search input { width: 100%; border: 0; outline: 0; color: #ede6d6; background: transparent; font-size: 13px; }
.lobby-search input::placeholder { color: #a9a296; }
.lobby-search { transition: border-color .18s ease, box-shadow .18s ease; }
.lobby-search:focus-within { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201,162,39,.2), 0 0 18px rgba(201,162,39,.08); }
.lobby-actions button { cursor: pointer; color: #ede6d6; background: #080f16; font-size: 14px; font-weight: 700; }
.bonus-button { padding: 0 16px; color: #e4be55 !important; background: #17201b !important; }
.bonus-button span { display:inline-block; margin-right: 5px; font-size: 9px; }.bonus-button small { margin-left: 5px; font-size: 12px; font-weight: 500; }
.header-deposit { display:inline-flex; height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid #e3b83e; border-radius:10px; color:#15130d !important; background:linear-gradient(180deg,#f2d263,#dbaa2d); box-shadow:inset 0 1px rgba(255,255,255,.42),0 8px 22px rgba(224,176,46,.13); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:filter .18s ease,transform .18s ease; }
.header-deposit:hover { filter:brightness(1.08); transform:translateY(-1px); }
.header-wallet-pill { display:flex; height:46px; align-items:center; gap:8px; padding:0 15px; border:1px solid; border-radius:12px; background:#14202d; box-shadow:inset 0 1px rgba(255,255,255,.035); transition:background .18s ease,transform .18s ease; }
.header-wallet-pill:hover { background:#192837; transform:translateY(-1px); }
.header-wallet-pill span { color:#aeb8c7; font-size:10px; font-weight:800; letter-spacing:.065em; text-transform:uppercase; white-space:nowrap; }
.header-wallet-pill strong { font-size:15px; font-weight:800; white-space:nowrap; }
.header-wallet-pill i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.header-wallet-pill.wallet-main { color:#f0b42f; border-color:rgba(224,171,43,.55); }
.header-wallet-pill.wallet-bonus { color:#efc761; border-color:rgba(190,149,48,.46); background:linear-gradient(105deg,#171e25,#20191b); }
.header-wallet-pill.wallet-bonus:hover { background:linear-gradient(105deg,#1b252d,#281d20); }
.header-wallet-pill.wallet-bonus i { color:#c9324b; box-shadow:0 0 10px rgba(201,50,75,.75); }
.header-icon-button { position:relative; display:grid; width:42px; height:42px; padding:0; place-items:center; border:1px solid #34414d; border-radius:9px; color:#d9d5ca !important; background:#080d11 !important; text-decoration:none; }
.header-icon-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.header-icon-button.has-alert::after { content:""; position:absolute; top:7px; right:7px; width:6px; height:6px; border:2px solid #080d11; border-radius:50%; background:#cf2941; }
.profile-button { display:grid; width:44px; height:44px; place-items:center; overflow:hidden; padding:2px; border:1px solid #92762d; border-radius:50%; background:#0d1418; box-shadow:0 0 0 2px rgba(240,199,94,.06),0 8px 24px rgba(0,0,0,.28); transition:border-color .18s ease,transform .18s ease; }
.profile-button:hover { border-color:#efc556; transform:translateY(-1px); }
.profile-button img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.login-button { padding: 0 18px; }.signup-button { min-width: 92px; border-color: #d5b44f !important; color: #13130b !important; background: linear-gradient(180deg, #f4d364, #d7ad36) !important; box-shadow: inset 0 1px rgba(255,255,255,.45); }
.login-button { transition: border-color .16s ease, color .16s ease; }
.login-button:hover { border-color:#c9a227; color:#f0c75e; }
.signup-button { position:relative; overflow:hidden; }

.lobby-sidebar {
  position: fixed;
  z-index: 40;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  overflow-y: auto;
  padding: 22px 20px 26px;
  border-right: 1px solid rgba(250,204,21,.5);
  background: #000;
}
.lobby-nav { display:flex; min-height:0; flex:1; flex-direction:column; gap:25px; }
.sidebar-nav-group { display:grid; gap:5px; }
.sidebar-section-label { padding:0 11px 7px; color:#696d6c; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.sidebar-primary-links { display:grid; gap:3px; }
.lobby-nav-item { position:relative; display:flex; align-items:center; gap:11px; min-height:43px; padding:9px 11px; border-radius:9px; color:#a9a296; font-size:14px; font-weight:600; transition:color .18s,background .18s,transform .18s; }
.lobby-nav-item span { display:block; width:17px; height:17px; flex:0 0 17px; }
.lobby-nav-item span img { display:block; width:17px; height:17px; }
.lobby-nav-item:hover { color:#ede6d6; background:linear-gradient(90deg,rgba(201,162,39,.08),rgba(201,162,39,.01)); transform:translateX(2px); }
.lobby-nav-item.is-active { color:#f2ca50; background:linear-gradient(90deg,rgba(201,162,39,.16),rgba(201,162,39,.02)); box-shadow:none; }
.lobby-nav-item.is-active::before { content:""; position:absolute; top:7px; bottom:9px; left:-1px; width:3px; border-radius:3px; background:#f2ca50; }
.gamevault-nav span { display:grid; place-items:center; border:1px solid #d5b44f; border-radius:50%; color:#e8c557; font-size:9px; }

.nav-glyph { display:grid !important; place-items:center; color:#b8a861; font-size:15px; }
.sidebar-logout { margin:auto 0 0; padding-top:22px; }
.sidebar-logout button,.sidebar-login { display:flex; width:100%; min-height:54px; align-items:center; gap:12px; padding:9px 12px; border:1px solid #293135; border-radius:11px; color:#b7bbb7; background:#0b1013; cursor:pointer; transition:border-color .18s,background .18s; }
.sidebar-logout button:hover,.sidebar-login:hover { border-color:rgba(207,41,65,.5); background:#141014; }
.sidebar-logout button > span:first-child { display:grid; width:31px; height:31px; place-items:center; border-radius:8px; color:#e25b6e; background:rgba(207,41,65,.1); }
.sidebar-logout button > span:last-child { display:grid; gap:2px; text-align:left; }
.sidebar-logout strong { color:#e1ddd3; font-size:11px; }
.sidebar-logout small { max-width:150px; overflow:hidden; color:#767d7a; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-login { justify-content:center; color:#e5c55d; font-size:11px; font-weight:700; text-decoration:none; }

.figma-sidebar-cards { display:grid; gap:13px; margin:16px auto 0; }
.figma-side-card { padding:18px 17px 16px; border:1px solid rgba(190,45,61,.5); border-radius:14px; background:linear-gradient(145deg,#111518,#0b0d0f); box-shadow:0 16px 28px rgba(0,0,0,.2); }
.figma-side-card .side-eyebrow { display:block; color:#e7c24d; font-family:Georgia,serif; font-size:9px; font-weight:700; letter-spacing:.14em; }
.figma-side-card h2 { margin:8px 0 5px; color:#eee8dc; font-family:Georgia,serif; font-size:18px; font-weight:500; }
.figma-side-card p { margin:0 0 14px; color:#858077; font-size:10px; line-height:1.55; }
.side-actions { display:flex; gap:9px; margin:5px 0 14px; }
.side-actions button { display:grid; width:31px; height:31px; place-items:center; padding:0; border:1px solid #374047; border-radius:50%; color:#b8b1a4; background:#11171b; font-size:11px; cursor:pointer; transition:border-color .18s,color .18s,transform .18s; }
.side-actions button:hover { border-color:#c9a227; color:#f0c75e; transform:translateY(-2px); }
.figma-side-card .side-cta { width:100%; min-height:38px; border:1px solid #bd2c43; border-radius:7px; color:#fff1e9; background:linear-gradient(180deg,#b52843,#8e152c); font-size:10px; font-weight:700; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.13); transition:filter .18s,box-shadow .18s; }
.figma-side-card .side-cta:hover { filter:brightness(1.12); box-shadow:0 0 18px rgba(185,35,63,.24); }
.offer-card { border-color:rgba(240,199,94,.25); }

.lobby-card-stack { display:flex; width:255px; min-height:650px; margin:10px auto 0; overflow:hidden; padding:16px; flex-direction:column; align-items:center; border-radius:12px; background:#131313; }
.lobby-vip-motion-space { display:grid; width:239px; height:229px; flex:0 0 229px; place-items:center; }
.lobby-vip-card, .lobby-welcome-card { width:199px; margin:0; border-radius:12px; text-align:center; }
.lobby-vip-card { position:relative; z-index:1; min-height:191px; padding:16px; border:0; background:#212121; box-shadow:none; transform-origin:center; animation:figma-vip-pulse 2s linear infinite; will-change:scale; }
.lobby-vip-card h2 { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 12px; color:#f0c75e; font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:700; line-height:17.5px; white-space:nowrap; }.lobby-vip-card h2 span { color:initial; font-family:Arial,sans-serif; font-size:24px; line-height:32px; }
.lobby-vip-card p { margin:0 0 20px; color:#a9a296; font-size:12px; line-height:19.5px; }
.lobby-vip-card button { position:relative; overflow:hidden; height:36px; padding:0 21px; border:0; border-radius:8px; color:white; background:linear-gradient(180deg,#ad0122,#991d2f); font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 4px 5px rgba(0,0,0,.25); transition:filter .18s ease,box-shadow .18s ease; }
.lobby-vip-card button:hover { filter:brightness(1.12); box-shadow:0 0 18px rgba(214,25,69,.42); }
.lobby-welcome-card { position:relative; min-height:265px; overflow:hidden; padding:20px 20px 13px; color:#fff; background:#00934d; }
.lobby-welcome-card h2 { position:relative; z-index:2; margin:0 0 15px; font-family:"Fraunces",Georgia,serif; font-size:18px; font-weight:700; line-height:22.5px; }
.lobby-welcome-card button { position:relative; z-index:2; height:36px; padding:0 15px; border:0; border-radius:9px; color:#181203; background:linear-gradient(180deg,#f0c75e,#c9a227); font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 8px rgba(201,162,39,.25); transition:transform .18s ease,box-shadow .18s ease; }
.welcome-signup-link { position:relative; z-index:2; height:36px; padding:0 15px; display:inline-flex; align-items:center; border-radius:9px; color:#181203; background:linear-gradient(180deg,#f0c75e,#c9a227); font-size:13px; font-weight:700; text-decoration:none; box-shadow:0 6px 8px rgba(201,162,39,.25); transition:transform .18s ease,box-shadow .18s ease; }
.welcome-signup-link:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(24,14,0,.28); }
.lobby-welcome-card button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(24,14,0,.28); }
.signup-treasure-art { position:absolute; right:20px; bottom:20px; z-index:1; display:block; width:159px; height:82px; border-radius:10px; object-fit:cover; }
.treasure-scene { position: absolute; z-index: 1; right: 21px; bottom: 10px; width: 210px; height: 105px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 40%,#e6c84f 0 10%,transparent 30%),linear-gradient(180deg,#3c9879,#163f3d 58%,#be8b35); box-shadow: inset 0 0 24px rgba(0,0,0,.3); }
.treasure-scene::before,.treasure-scene::after { content:""; position:absolute; bottom:8px; width:68px; height:28px; border-radius:50%; background:#23584f; box-shadow:0 0 0 7px rgba(33,107,79,.5); }.treasure-scene::before{left:-15px}.treasure-scene::after{right:-15px}
.treasure-glow { position:absolute; left:50%; bottom:28px; width:120px; height:60px; border-radius:50%; background:rgba(255,213,66,.48); filter:blur(12px); transform:translateX(-50%); }
.treasure-chest { position:absolute; left:50%; bottom:13px; width:86px; height:45px; border:4px solid #6f370b; border-radius:4px 4px 10px 10px; background:linear-gradient(90deg,#a96312,#edbc37 18% 28%,#a96312 30% 70%,#edbc37 72% 82%,#a96312 84%); box-shadow:0 8px 12px rgba(0,0,0,.45); transform:translateX(-50%); }.treasure-chest::before{content:"";position:absolute;left:-4px;right:-4px;top:-31px;height:31px;border:4px solid #6f370b;border-radius:45px 45px 3px 3px;background:linear-gradient(90deg,#9a5411,#f2c64a 20%,#9a5411 30% 70%,#efc54c 80%,#9a5411)}.treasure-chest i{position:absolute;z-index:2;left:50%;top:5px;width:16px;height:19px;border:3px solid #7b4210;border-radius:2px;background:#f0c94f;transform:translateX(-50%)}

.lobby-main { width: calc(100% - var(--sidebar-width)); min-height: 100vh; margin-left: var(--sidebar-width); padding-top: var(--header-height); background: transparent; }
.lobby-hero { position: relative; isolation:isolate; height: 260px; overflow: hidden; margin: 0 1px; border:1px solid rgba(201,162,39,.25); border-radius:20px; background:#770017; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.lobby-hero::before { content:""; position:absolute; z-index:1; inset:0; background-image:radial-gradient(ellipse 83% 150% at 30% 20%,rgba(240,199,94,.18) 0%,transparent 55%),linear-gradient(90deg,#b10022 0%,#94001c 27.407%,#86001a 63.704%,#7e0018 81.852%,#7b0018 90.926%,#790017 95.463%,#770017 100%); pointer-events:none; }
.hero-photo-layer,.hero-texture-layer,.hero-hover-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; transition:opacity .3s ease-out; }
.hero-photo-layer { z-index:0; opacity:.5; }
.hero-texture-layer { z-index:2; opacity:.15; }
.hero-hover-layer { z-index:2; opacity:0; }
.lobby-hero:hover .hero-photo-layer,.lobby-hero:hover .hero-texture-layer { opacity:0; }
.lobby-hero:hover .hero-hover-layer { opacity:.15; }
.lobby-hero-copy { position: absolute; z-index: 6; top: 46px; left: 98px; }
.lobby-hero-copy h1 { margin: 0; color: #ede6d6; font-size: clamp(42px, 3.14vw, 60px); font-weight: 600; line-height: .792; letter-spacing: -.5px; }
.lobby-hero-copy h1 em { color: #f0c75e; font-style: normal; }
.spin-button { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 180px; height: 35px; margin: 20px 0 0 44px; padding: 0 8px; border: 0; border-radius: 10px; color: #410004; background: linear-gradient(132.4224935deg, #f3e5ab 0%, #d4af37 50%, #aa7a00 100%); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 7.5px rgba(211,47,47,.3); transform-origin: center; animation: figma-button-pulse 2s linear infinite; }
.spin-icon { width:30px; height:30px; flex:0 0 30px; }
.spin-button > span { display:block; width:126px; line-height:15px; text-align:center; }
.lobby-hero-vip { position: absolute; z-index: 3; top: -54px; left: 47%; width: 570px; opacity: .48; transform: rotate(-15deg); transition:transform .3s ease-out; }
.hero-circle-motion { position:absolute; z-index:7; top:-28px; right:-25px; width:150px; height:150px; transform:rotate(-180deg); transform-origin:center; scale:1.2; animation:figma-hero-circle-rotate 2s linear infinite,figma-hero-circle-scale 2s linear infinite; transition:top .3s ease-out,right .3s ease-out; }
.hero-circle-motion img { position:absolute; inset:-6px; width:162px; height:162px; }
.playing-cards { position:absolute; z-index:5; left:calc(81.25% + 0px); top:129px; width:612px; height:141px; transform:rotate(-8.03deg) skewX(3.8deg); transform-origin:center; transition:left .3s ease-out,top .3s ease-out,transform .3s ease-out; }
.playing-cards > .fan-card { position:absolute; display:flex; width:96px; height:140px; align-items:flex-start; gap:2px; padding:10px; border:0; border-radius:10px; background:linear-gradient(160deg,#fff 0%,#ede6d6 100%); font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:700; line-height:normal; box-shadow:0 14px 13px rgba(0,0,0,.45); transform-origin:center; transition:left .3s ease-out,top .3s ease-out,transform .3s ease-out; }
.playing-cards > .fan-card b,.playing-cards > .fan-card i { font:inherit; line-height:normal; }
.playing-cards > .fan-card i { font-style:normal; }
.playing-cards > .fan-card:nth-child(1){left:-59.78px;top:9.13px;transform:rotate(-18deg)}
.playing-cards > .fan-card:nth-child(1) b{color:#9b1b30}.playing-cards > .fan-card:nth-child(1) i{color:#0a0e13}
.playing-cards > .fan-card:nth-child(2){left:8.05px;top:-5.58px;transform:rotate(-6deg)}
.playing-cards > .fan-card:nth-child(2) b,.playing-cards > .fan-card:nth-child(2) i{color:#9b1b30}
.playing-cards > .fan-card:nth-child(3){left:79.94px;top:-5.58px;transform:rotate(6deg)}
.playing-cards > .fan-card:nth-child(3) b{color:#0f3d2e}.playing-cards > .fan-card:nth-child(3) i{color:#0a0e13}
.playing-cards > .fan-card:nth-child(4){left:147.78px;top:9.13px;transform:rotate(18deg)}
.playing-cards > .fan-card:nth-child(4) b{color:#0f3d2e}.playing-cards > .fan-card:nth-child(4) i{color:#9b1b30}
.lobby-hero:hover .lobby-hero-vip { transform:translate(-6px,21px) rotate(-15deg); }
.lobby-hero:hover .hero-circle-motion { top:-42px; right:-14px; }
.lobby-hero:hover .playing-cards { left:calc(80.75% + 0px); top:111px; transform:rotate(-10.7deg) skewX(4.98deg); }
.lobby-hero:hover .playing-cards > .fan-card:nth-child(1){left:-70.68px;top:7.09px;transform:rotate(-26deg)}
.lobby-hero:hover .playing-cards > .fan-card:nth-child(2){left:2.55px;top:-14.94px;transform:rotate(-9deg)}
.lobby-hero:hover .playing-cards > .fan-card:nth-child(3){left:85.45px;top:-14.94px;transform:rotate(9deg)}
.lobby-hero:hover .playing-cards > .fan-card:nth-child(4){left:158.69px;top:7.09px;transform:rotate(26deg)}

.lobby-tabs { display: flex; align-items: center; justify-content: center; gap: 8px; height: 61px; }
.lobby-tab { height:36px; padding:0 16px; border:1px solid rgba(237,230,214,.25); border-radius:999px; color:#a9a296; background:#0a0e13; font-family:Inter,Arial,sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
.lobby-tab.is-active { border-color: #c6a23f; color: #17130a; background: linear-gradient(180deg,#f0cf5c,#cba12f); }
.lobby-section { padding: 0 0 0; scroll-margin-top: 80px; }
.lobby-section[hidden] { display: none; }
.lobby-section-heading { display: flex; align-items: flex-end; justify-content: space-between; height: 72px; padding: 0 2px 10px; border-bottom: 1px solid rgba(210,176,73,.38); }
.lobby-section-heading h2 { margin:0; color:#ede6d6; font-size:26px; font-weight:600; line-height:32px; letter-spacing:-.3px; }.lobby-section-heading h2 em { color:#f0c75e; font-style:normal; }.lobby-section-heading p { margin:0; color:#6b6459; font-family:Inter,Arial,sans-serif; font-size:13px; }
#spotlights .lobby-section-heading h2 { color:#f0c75e; }
.lobby-section-heading a { margin: 0 4px 1px 0; padding: 7px 15px; border: 1px solid rgba(237,230,214,.25); border-radius: 8px; color: #ede6d6; font-size: 11px; }
.featured-block .lobby-section-heading { margin: 0 2px; }
.featured-rail { height: 331px; overflow: hidden; padding: 16px 0 15px; }
.featured-track { --carousel-distance:1500px; --carousel-duration:40s; display:flex; width:max-content; gap:15px; will-change:transform; }
.featured-track.is-ready { animation:featured-carousel var(--carousel-duration) linear infinite; }
.featured-rail.can-hover-pause:hover .featured-track { animation-play-state:paused; }
.featured-game { display:grid; width:300px; height:300px; flex:0 0 300px; min-width:0; place-items:center; overflow:hidden; padding:0; border:0; border-radius:20px; cursor:pointer; background:#111927; box-shadow:inset 0 -60px 80px rgba(15,21,56,.38); transition:transform .2s,box-shadow .2s; }
.featured-game:hover { transform: translateY(-3px); box-shadow: inset 0 -60px 80px rgba(15,21,56,.2), 0 10px 24px rgba(0,0,0,.3); }
.featured-game img { width: 100%; height: 100%; object-fit: cover; }
.sea{background:linear-gradient(180deg,#41d6ca,#1877b3)}.teal{background:linear-gradient(180deg,#12bc70,#70509d)}.purple{background:linear-gradient(180deg,#de4381,#139ce0)}.green{background:linear-gradient(180deg,#21e876,#b4c8b7)}.blue{background:linear-gradient(180deg,#df3f79,#10a5e8)}.cyan{background:linear-gradient(180deg,#13d9c8,#133ede)}.silver{background:linear-gradient(180deg,#b8d5ca,#21304b)}

.game-card-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:31px; padding:20px 0; }
.game-card { min-width: 0; overflow: hidden; border:1px solid rgba(237,230,214,.06); border-radius: 14px; background: #131a23; transition: border-color .3s ease-out, box-shadow .3s ease-out; }.game-card:hover { border-color:rgba(201,162,39,.4); box-shadow: 0 20px 34px -14px rgba(0,0,0,.55); }
.game-card > button { position:relative; display:grid; width:100%; margin:0; aspect-ratio:234.8/313.06; place-items:center; overflow:hidden; padding:0; border:0; color:white; background:#0a0e13; cursor:pointer; }
.game-card > button::before { content:""; position:absolute; z-index:4; top:50%; left:50%; display:grid; width:36.8px; height:36.8px; place-items:center; border:1px solid rgba(240,199,94,.6); border-radius:50%; background:rgba(10,14,19,.55) url("assets/casino-home/play-icon.svg") center/12.8px 12.8px no-repeat; opacity:0; transform:translate(-50%,-50%) scale(.8); transition:width .3s ease-out,height .3s ease-out,opacity .3s ease-out,transform .3s ease-out; backdrop-filter:blur(2px); }
.game-card:hover > button::before,.game-card:focus-within > button::before { width:46px; height:46px; opacity:1; transform:translate(-50%,-50%) scale(1); }
.game-card > button > img { width: 100%; height: 100%; object-fit: cover; transition:transform .3s ease-out,filter .3s ease-out; }
.game-card:hover > button > img { transform:scale(1.075); filter:saturate(1.06) contrast(1.02); }
.game-card > button.logo-art > img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(0,0,0,.34)); }
.game-card h3 { overflow:hidden; margin:0; padding:12px 13px 0; color:#ede6d6; font-family:Inter,Arial,sans-serif; font-size:14px; font-weight:700; line-height:17px; text-overflow:ellipsis; white-space:nowrap; }.game-card p { margin:0; padding:8px 13px 15px; color:#6b6459; font-family:Inter,Arial,sans-serif; font-size:11.5px; line-height:14px; }
.rtp { position:absolute; right:9px; bottom:10px; padding:3px 7px; border:1px solid rgba(201,162,39,.3); border-radius:5px; color:#f0c75e; background:rgba(10,14,19,.75); font-family:"Space Mono",monospace; font-size:10px; }.rtp.low { color:#9b1b30; background:rgba(10,14,19,.75); }
.hot-badge { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:5px; color:#ede6d6; background:#9b1b30; font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.word-art { color:#efbc2f; font-size:29px; font-weight:900; line-height:.78; text-align:center; text-shadow:3px 3px #7a1659,-2px -2px #5b1d82; }.word-art small{font-size:12px}.orion{color:#c438ff;text-shadow:2px 2px #51337d,-2px -2px #f0ab46}
.popular-grid { row-gap: 18px; }

.connected-games-section { padding:24px 2px 0; }
.connected-game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px 0 4px; }
.connected-game-tile { min-height:112px; display:flex; align-items:center; gap:16px; padding:20px; overflow:hidden; border:1px solid rgba(237,230,214,.1); border-radius:16px; color:#eee9de; background:radial-gradient(circle at 100% 0,rgba(215,173,62,.17),transparent 50%),#10161b; text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; }
.connected-game-tile:hover { transform:translateY(-3px); border-color:rgba(229,185,70,.5); box-shadow:0 18px 36px rgba(0,0,0,.3); }
.connected-game-tile > span { width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center; border:1px solid rgba(232,190,79,.5); border-radius:50%; color:#f0c75e; background:#090c0e; font-size:20px; font-weight:800; box-shadow:inset 0 0 22px rgba(213,35,65,.18); }
.connected-game-tile div { display:grid; gap:5px; }
.connected-game-tile strong { font-size:17px; }
.connected-game-tile small { color:#7e878c; }
.connected-game-tile > b { margin-left:auto; color:#e6bd54; font-size:21px; }
.juwa2-tile { background:radial-gradient(circle at 100% 0,rgba(25,211,190,.17),transparent 52%),#10161b; }
.juwa777-tile { background:radial-gradient(circle at 100% 0,rgba(217,52,96,.2),transparent 52%),#10161b; }

.provider-catalog { padding-top:26px; }
.provider-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:20px 0 8px; }
.provider-catalog-card { min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--game-accent) 34%,#283038); border-radius:18px; color:#ede6d6; background:linear-gradient(145deg,#11181e,#0b0f12); text-decoration:none; box-shadow:0 18px 42px rgba(0,0,0,.22); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.provider-catalog-card:hover { transform:translateY(-5px); border-color:var(--game-accent); box-shadow:0 24px 54px rgba(0,0,0,.38); }
.provider-catalog-art { position:relative; height:260px; overflow:hidden; background:#10161b; }
.provider-catalog-art::after { content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(transparent,#11181e); }
.provider-catalog-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.provider-catalog-card:hover .provider-catalog-art img { transform:scale(1.045); }
.provider-catalog-copy { min-height:202px; padding:20px; }
.provider-catalog-copy small { color:var(--game-accent); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.provider-catalog-copy h3 { margin:8px 0 9px; font-size:22px; }
.provider-catalog-copy p { min-height:58px; margin:0 0 18px; color:#8e9694; font-size:12px; line-height:1.55; }
.provider-catalog-copy b { display:flex; align-items:center; justify-content:space-between; color:#e9e2d4; font-size:12px; }
.provider-catalog-copy b span { color:var(--game-accent); font-size:19px; }
.empty-games { grid-column:1/-1; padding:50px; border:1px dashed #2b3338; border-radius:16px; color:#8e9694; text-align:center; }

/* Personal game library */
.my-games-shell { background:#070a0d; background-image:radial-gradient(900px 560px at 12% -10%,rgba(12,112,104,.2),transparent 64%),radial-gradient(780px 520px at 96% 1%,rgba(188,24,91,.17),transparent 67%); }
.my-games-main { min-height:100vh; padding-bottom:0; }
.game-library { position:relative; isolation:isolate; min-height:calc(100vh - var(--header-height)); overflow:hidden; padding:54px clamp(24px,4vw,72px) 76px; }
.game-library::before { content:""; position:absolute; z-index:-1; top:-250px; right:-250px; width:720px; height:720px; border-radius:50%; background:conic-gradient(from 210deg,transparent,rgba(211,31,101,.12),transparent 32%,rgba(24,173,194,.1),transparent 67%); filter:blur(18px); animation:library-ambient-orbit 22s linear infinite; pointer-events:none; }
.library-heading { position:relative; display:flex; max-width:1160px; align-items:end; justify-content:space-between; gap:30px; margin:0 auto; padding-bottom:28px; border-bottom:1px solid rgba(240,199,94,.28); }
.library-heading::after { content:""; position:absolute; bottom:-1px; left:0; width:210px; height:1px; background:linear-gradient(90deg,#e8b835,rgba(255,255,255,.9),transparent); box-shadow:0 0 12px rgba(240,199,94,.62); }
.library-heading-copy { position:relative; }
.library-heading-copy > span { color:#e4b83f; font-size:10px; font-weight:800; letter-spacing:.19em; }
.library-heading h1 { margin:9px 0 8px; color:#f3eee4; font-size:clamp(40px,4.6vw,64px); line-height:.96; letter-spacing:-.058em; }
.library-heading h1 em { color:#f0c75e; font-style:normal; }
.library-heading p { max-width:560px; margin:0; color:#8f9997; font-size:13px; line-height:1.6; }
.library-count { min-width:172px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; padding:16px 20px; border:1px solid #32383d; border-radius:15px; background:linear-gradient(145deg,rgba(21,27,32,.94),rgba(10,13,17,.9)); box-shadow:inset 0 1px rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.2); }
.library-count strong { color:#f0c75e; font-family:"Fraunces",Georgia,serif; font-size:35px; font-weight:700; line-height:1; text-shadow:0 0 20px rgba(240,199,94,.25); }
.library-count span { color:#9ba3a1; font-size:9px; font-weight:800; line-height:1.35; letter-spacing:.04em; text-transform:uppercase; }
.library-game-grid { display:grid; max-width:1160px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin:0 auto; padding-top:32px; }
.library-game-card { --pointer-x:50%; --pointer-y:30%; position:relative; min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--library-accent) 42%,#29333a); border-radius:22px; color:#ede6d6; background:linear-gradient(155deg,#10181d,#090d11 72%); box-shadow:0 24px 64px rgba(0,0,0,.36); animation:library-card-enter .68s cubic-bezier(.2,.82,.2,1) both; animation-delay:calc(var(--library-index) * 90ms); transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease; }
.library-game-card::before { content:""; position:absolute; z-index:3; inset:0; opacity:0; background:radial-gradient(380px circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--library-accent) 17%,transparent),transparent 66%); transition:opacity .25s ease; pointer-events:none; }
.library-game-card::after { content:""; position:absolute; z-index:4; right:18%; bottom:0; left:18%; height:1px; background:var(--library-accent); box-shadow:0 0 18px 2px color-mix(in srgb,var(--library-accent) 58%,transparent); opacity:.55; transition:right .28s ease,left .28s ease,opacity .28s ease; pointer-events:none; }
.library-game-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--library-accent) 80%,#d7c27b); box-shadow:0 32px 78px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--library-accent) 13%,transparent); }
.library-game-card:hover::before { opacity:1; }
.library-game-card:hover::after { right:7%; left:7%; opacity:.95; }
.library-game-card:focus-visible { outline:2px solid #f0c75e; outline-offset:4px; }
.library-game-art { position:relative; height:245px; overflow:hidden; background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--library-accent) 22%,#172229),#070b0e 70%); }
.library-game-art::after { content:""; position:absolute; inset:22% 0 0; background:linear-gradient(transparent 25%,rgba(9,13,17,.34) 68%,#0d1418 100%); }
.library-game-art img { width:100%; height:100%; object-fit:contain; padding:38px 44px; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)); transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }
.library-game-card[data-provider="juwa2"] .library-game-art img { object-fit:cover; object-position:center 18%; padding:0; filter:saturate(.95) contrast(1.03); }
.library-game-card:hover .library-game-art img { transform:scale(1.065); filter:drop-shadow(0 22px 28px rgba(0,0,0,.54)) saturate(1.14); }
.library-game-card[data-provider="juwa2"]:hover .library-game-art img { filter:saturate(1.08) contrast(1.04); }
.library-status { position:absolute; z-index:2; top:16px; left:16px; display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:999px; color:#e5ece8; background:rgba(5,10,12,.82); box-shadow:0 8px 24px rgba(0,0,0,.22); backdrop-filter:blur(9px); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.library-status i { width:7px; height:7px; border-radius:50%; background:#46e29b; box-shadow:0 0 0 0 rgba(70,226,155,.6); animation:library-status-pulse 2s ease-out infinite; }
.library-status.status-pending i { background:#e4b33d; box-shadow:0 0 10px rgba(228,179,61,.7); }
.library-status.status-disabled i { background:#c9324b; box-shadow:0 0 10px rgba(201,50,75,.7); }
.library-open-icon { position:absolute; z-index:2; top:16px; right:16px; display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:#f0c75e; background:rgba(6,11,13,.8); box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .25s ease,background .25s ease,color .25s ease; }
.library-open-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.library-game-card:hover .library-open-icon { transform:rotate(45deg); background:#e8bb3e; color:#100d05; }
.library-game-body { position:relative; z-index:2; padding:0 24px 22px; }
.library-title-row { display:flex; min-height:91px; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #263036; }
.library-title-row > div { min-width:0; }
.library-title-row small { color:var(--library-accent); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.library-title-row h2 { overflow:hidden; margin:7px 0 0; color:#f3eee5; font-size:23px; line-height:1.12; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.library-title-row > strong { display:grid; justify-items:end; color:#f0c75e; font-family:"Space Mono",monospace; font-size:19px; line-height:1.15; white-space:nowrap; }
.library-title-row > strong span { margin-bottom:7px; color:#697473; font-family:"Manrope",Arial,sans-serif; font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.library-account-data { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0; padding:19px 0; }
.library-account-data div { min-width:0; }
.library-account-data dt { margin-bottom:7px; color:#687273; font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.library-account-data dd { overflow:hidden; margin:0; color:#d8ddd7; font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.library-card-footer { display:flex; min-height:46px; align-items:center; justify-content:space-between; gap:12px; padding-top:15px; border-top:1px solid #263036; }
.library-card-footer > span { display:flex; align-items:center; gap:8px; color:#7f8987; font-size:9px; }
.library-card-footer > span i { width:6px; height:6px; border-radius:50%; background:#3aa67a; }
.library-card-footer b { display:flex; min-width:148px; min-height:40px; align-items:center; justify-content:center; gap:14px; padding:0 17px; border:1px solid rgba(240,199,94,.58); border-radius:9px; color:#f3ede1; background:linear-gradient(180deg,rgba(31,38,43,.88),rgba(14,19,23,.88)); font-size:11px; transition:color .2s ease,background .2s ease,box-shadow .2s ease; }
.library-card-footer b svg { width:17px; height:17px; fill:none; stroke:#f0c75e; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.library-game-card:hover .library-card-footer b { color:#111006; background:#ecc044; box-shadow:0 8px 24px rgba(224,175,51,.17); }
.library-game-card:hover .library-card-footer b svg { stroke:#111006; transform:translateX(3px); }
.library-empty { display:grid; max-width:610px; justify-items:center; margin:70px auto 0; padding:54px 30px; border:1px dashed rgba(240,199,94,.28); border-radius:20px; background:radial-gradient(circle at 50% 0,rgba(240,199,94,.08),transparent 62%),#0b1013; text-align:center; }
.library-empty > span { display:grid; width:54px; height:54px; place-items:center; border:1px solid rgba(240,199,94,.3); border-radius:50%; color:#f0c75e; background:#10171a; font-size:22px; }
.library-empty h2 { margin:20px 0 8px; font-family:"Fraunces",Georgia,serif; font-size:29px; }
.library-empty p { max-width:420px; margin:0; color:#7e8784; font-size:11px; line-height:1.65; }
.library-empty a { display:inline-flex; min-height:42px; align-items:center; gap:12px; margin-top:24px; padding:0 17px; border-radius:9px; color:#171205; background:linear-gradient(#f2d15c,#cda12d); font-size:10px; font-weight:800; }
@keyframes library-card-enter { from { opacity:0; transform:translateY(24px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes library-status-pulse { 0% { box-shadow:0 0 0 0 rgba(70,226,155,.54); } 70%,100% { box-shadow:0 0 0 7px rgba(70,226,155,0); } }
@keyframes library-ambient-orbit { to { transform:rotate(360deg); } }

/* Trending game rankings */
.trending-games-shell { background:#080b0d; background-image:radial-gradient(900px 510px at 10% -12%,rgba(23,88,67,.25),transparent 64%),radial-gradient(760px 470px at 100% 0,rgba(155,27,48,.13),transparent 65%); }
.trending-games-main { min-height:100vh; padding-bottom:0; }
.trending-library { min-height:calc(100vh - var(--header-height)); padding:52px clamp(24px,4vw,72px) 68px; }
.trending-live-key { display:flex; max-width:230px; align-items:center; gap:10px; padding:13px 15px; border:1px solid #293238; border-radius:12px; color:#89918f; background:#0d1418; font-size:9px; line-height:1.35; }
.trending-live-key i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#45cf8b; box-shadow:0 0 12px rgba(69,207,139,.72); animation:trending-live-pulse 1.8s ease-in-out infinite; }
.trending-game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-top:30px; }
.trending-game-card { min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--trend-accent) 34%,#2b3439); border-radius:20px; color:#ede6d6; background:#0d1317; box-shadow:0 22px 54px rgba(0,0,0,.25); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.trending-game-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--trend-accent) 78%,#d7bd68); box-shadow:0 30px 72px rgba(0,0,0,.42),0 0 28px color-mix(in srgb,var(--trend-accent) 10%,transparent); }
.trending-game-card:focus-visible { outline:2px solid #f0c75e; outline-offset:4px; }
.trending-card-art { position:relative; height:245px; overflow:hidden; background:#0a0f12; }
.trending-card-art::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,#0d1317 94%); }
.trending-card-art img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease,filter .4s ease; }
.trending-game-card:hover .trending-card-art img { transform:scale(1.045); filter:saturate(1.08); }
.trending-rank { position:absolute; z-index:2; top:15px; left:15px; display:grid; min-width:42px; height:34px; place-items:center; padding:0 10px; border:1px solid rgba(240,199,94,.42); border-radius:9px; color:#f0c75e; background:rgba(6,10,12,.84); font-family:"Space Mono",monospace; font-size:12px; font-weight:800; backdrop-filter:blur(7px); }
.trending-source { position:absolute; z-index:2; top:15px; right:15px; padding:8px 10px; border:1px solid rgba(69,207,139,.35); border-radius:999px; color:#71d9a7; background:rgba(6,12,13,.84); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(7px); }
.trending-source.is-admin { color:#f0c75e; border-color:rgba(240,199,94,.42); }
.trending-card-body { padding:2px 20px 20px; }
.trending-card-body > small { color:var(--trend-accent); font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.trending-card-body h2 { margin:6px 0 9px; color:#eee8dd; font-size:22px; }
.trending-card-body > p { min-height:57px; margin:0; color:#8d9693; font-size:11px; line-height:1.55; }
.trending-card-meta { display:flex; min-height:48px; align-items:end; justify-content:space-between; gap:12px; margin-top:17px; padding-top:15px; border-top:1px solid #252e33; }
.trending-card-meta > span { display:flex; align-items:center; gap:6px; color:#717c79; font-size:8px; }
.trending-card-meta > span i { width:6px; height:6px; border-radius:50%; background:#43c888; }
.trending-card-meta > span strong { color:#bfc7c2; font-size:10px; }
.trending-card-meta b { color:#ece5d9; font-size:9px; white-space:nowrap; }
.trending-card-meta b span { margin-left:5px; color:#f0c75e; font-size:15px; transition:transform .18s ease; }
.trending-game-card:hover .trending-card-meta b span { display:inline-block; transform:translateX(3px); }
@keyframes trending-live-pulse { 50% { opacity:.42; transform:scale(.72); } }

.lobby-footer { margin-top:48px; padding:0 clamp(20px,4.5vw,72px); border-top:1px solid rgba(211,177,67,.42); color:#aba69b; background:#080b0d; }
.footer-columns { display:grid; grid-template-columns:minmax(250px,1.45fr) repeat(3,minmax(130px,1fr)); gap:clamp(34px,5vw,86px); padding:42px 0 32px; }
.footer-brand-lockup { display:flex; align-items:center; gap:15px; color:#eee8da; font-family:"Fraunces",Georgia,serif; font-size:27px; }
.footer-brand-lockup b { color:#f0c75e; font-style:italic; font-weight:600; }
.footer-monogram { display:grid; width:45px; height:45px; flex:0 0 45px; place-items:center; border:1px solid #d6ac39; border-radius:50%; color:#f0eadf; font-family:"Fraunces",Georgia,serif; font-size:16px; }
.footer-brand-block p { display:flex; align-items:center; gap:9px; margin:23px 0 17px; color:#ede8df; font-size:13px; }
.footer-brand-block p strong { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#f4c83e; box-shadow:0 0 10px rgba(244,200,62,.34); }
.footer-brand-block small { display:block; max-width:320px; color:#b2ada3; font-size:12px; line-height:1.75; }
.footer-link-column h3 { margin:0 0 23px; color:#f2ca50; font-size:15px; letter-spacing:.055em; }
.footer-link-column > a { display:block; width:max-content; max-width:100%; margin:0 0 15px; color:#c4beb3; font-size:12px; text-decoration:none; transition:color .16s ease,transform .16s ease; }
.footer-link-column > a:hover,.footer-link-column > a:focus-visible { color:#f0c75e; transform:translateX(3px); }
.social-links { display:flex; gap:9px; margin-top:24px; }
.social-links a { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:9px; color:#fff; background:#2374d8; transition:transform .18s ease,filter .18s ease; }
.social-links a:hover,.social-links a:focus-visible { transform:translateY(-3px); filter:brightness(1.12); }
.social-links a:nth-child(2) { background:linear-gradient(145deg,#6535ca,#e72e77 62%,#f5b338); }
.social-links a:nth-child(3) { background:#f04b23; }
.social-links a:nth-child(4) { background:#5865f2; }
.social-links svg { width:21px; height:21px; fill:currentColor; stroke:currentColor; stroke-width:1.4; }
.social-links a:first-child svg,.social-links a:nth-child(4) svg { stroke:none; }
.social-links .filled-dot { fill:currentColor; stroke:none; }
.lobby-footer .footer-bottom { display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:24px; padding:17px 0 24px; border-top:1px solid #20262a; color:#908b82; font-size:10px; }
.footer-bottom-actions { display:flex; align-items:center; gap:32px; }
.lobby-footer .footer-bottom nav { display:flex; gap:30px; }
.lobby-footer .footer-bottom a { color:#9f998e; text-decoration:none; transition:color .16s ease; }
.lobby-footer .footer-bottom a:hover,.lobby-footer .footer-bottom a:focus-visible { color:#f0c75e; }
.footer-whatsapp { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border:3px solid #eaf8ee; border-radius:50%; background:#2fc65d; box-shadow:0 7px 24px rgba(47,198,93,.18); }
.footer-whatsapp svg { width:28px; height:28px; fill:#fff; }
.game-toast { position: fixed; z-index: 80; right: 28px; bottom: 28px; padding: 13px 18px; border: 1px solid #b9912a; border-radius: 9px; color: #f4d06c; background: #111921; box-shadow: 0 14px 34px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s; }.game-toast.is-visible { opacity:1; transform:translateY(0); }

@media (min-width: 1300px) {
  .lobby-section { padding-right: 24px; padding-left: 2px; }
}

@media (max-width: 1280px) {
  .casino-shell.lobby { --sidebar-width: 230px; min-width: 960px; }
  .lobby-sidebar { padding-right:9px; padding-left:9px; }.lobby-card-stack{width:212px;padding:6px}.lobby-vip-card,.lobby-welcome-card{width:199px}.lobby-nav-item{font-size:16px}.signup-treasure-art{width:159px}.lobby-hero-copy{left:55px}.lobby-hero-copy h1{font-size:43px}.lobby-hero-vip{left:45%}.lobby-section{padding-right:14px;padding-left:2px}.game-card-grid{gap:12px}.featured-track{gap:8px}.featured-game{width:210px;flex-basis:210px}.lobby-search{width:225px}
}

@media (max-width: 1180px) {
  .library-game-grid,.trending-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .casino-shell.lobby { min-width: 0; --header-height: 62px; --sidebar-width: 0px; }
  .lobby-header { z-index:70; padding:0 12px; }
  .lobby-brand-cluster { gap:8px; }
  .mobile-menu-button { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; padding:0; border:1px solid #37424a; border-radius:10px; color:#f2ca50; background:#0b1115; box-shadow:inset 0 1px rgba(255,255,255,.035); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
  .mobile-menu-button:hover,.mobile-menu-button:focus-visible { border-color:#c9a227; background:#131a1f; transform:translateY(-1px); }
  .mobile-menu-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .lobby-brand{font-size:17px}.lobby-brand-mark{width:25px;height:25px}.bonus-button,.login-button,.header-deposit{display:none}.lobby-actions{gap:5px}.lobby-search{width:150px;height:38px}.lobby-actions button{height:38px}.signup-button{min-width:72px}.header-wallet-pill{height:38px;padding:0 9px}.header-wallet-pill span{display:none}.header-wallet-pill strong{font-size:11px}.header-wallet-pill i{width:6px;height:6px;flex-basis:6px}.header-icon-button,.profile-button{width:38px;height:38px}
  .lobby-sidebar { position:fixed; z-index:65; top:var(--header-height); right:auto; bottom:0; left:0; display:flex; width:min(84vw,320px); height:auto; overflow-y:auto; padding:0 16px 22px; border:0; border-right:1px solid rgba(240,199,94,.35); background:linear-gradient(160deg,#080c10 0%,#020405 82%); box-shadow:22px 0 70px rgba(0,0,0,.62); opacity:0; visibility:hidden; transform:translateX(-104%); transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility .28s; }
  .lobby-sidebar.is-mobile-open { opacity:1; visibility:visible; transform:translateX(0); }
  .sidebar-mobile-head { position:sticky; z-index:2; top:0; display:flex; min-height:70px; align-items:center; justify-content:space-between; margin:0 -16px 12px; padding:0 16px; border-bottom:1px solid #20282d; background:rgba(6,9,12,.94); backdrop-filter:blur(10px); }
  .sidebar-mobile-head strong { color:#f2ece0; font-size:15px; letter-spacing:.02em; }
  .sidebar-mobile-head button { display:grid; width:38px; height:38px; place-items:center; padding:0; border:1px solid #354048; border-radius:10px; color:#cbc5b9; background:#10171c; cursor:pointer; }
  .sidebar-mobile-head button:hover,.sidebar-mobile-head button:focus-visible { border-color:#c9a227; color:#f2ca50; }
  .sidebar-mobile-head svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .sidebar-mobile-backdrop { position:fixed; z-index:61; inset:var(--header-height) 0 0; display:block; width:auto; height:auto; padding:0; border:0; background:rgba(0,0,0,.68); opacity:0; visibility:hidden; cursor:pointer; backdrop-filter:blur(3px); transition:opacity .22s ease,visibility .22s; }
  body.sidebar-drawer-open .sidebar-mobile-backdrop { opacity:1; visibility:visible; }
  body.sidebar-drawer-open { overflow:hidden; }
  .lobby-nav { display:flex; min-height:0; flex:1; flex-direction:column; gap:22px; }
  .sidebar-nav-group,.sidebar-nav-group.sidebar-primary { display:grid; height:auto; }
  .sidebar-section-label { display:block; }
  .sidebar-primary-links { display:grid; grid-template-columns:1fr; height:auto; }
  .lobby-nav-item { justify-content:flex-start; min-height:46px; height:auto; padding:10px 11px; font-size:14px; }
  .lobby-nav-item span { width:19px; height:19px; flex-basis:19px; }
  .lobby-nav-item span img { width:19px; height:19px; }
  .lobby-card-stack,.figma-sidebar-cards { display:none; }
  .sidebar-logout,.sidebar-login { display:block; }
  .lobby-main{width:100%;margin-left:0;padding-bottom:0}.lobby-hero{height:235px}.lobby-hero-copy{top:38px;left:24px}.lobby-hero-copy h1{font-size:38px;line-height:.9}.spin-button{margin-left:0}.lobby-hero-vip{display:none}.playing-cards{opacity:.7}.lobby-tabs{height:55px}.lobby-section-heading{height:65px}.featured-rail{height:280px}.featured-game{width:200px;height:248px;flex-basis:200px}.game-card-grid{grid-template-columns:repeat(3,1fr)}.connected-game-grid{grid-template-columns:1fr}.provider-catalog-grid{grid-template-columns:1fr}.provider-catalog-art{height:230px}.footer-columns{grid-template-columns:1.35fr repeat(3,1fr);gap:28px}.lobby-footer{padding:0 24px}
  .my-games-main,.trending-games-main{padding-bottom:0}.game-library,.trending-library{padding:34px 18px 66px}.library-heading{align-items:flex-start}.library-game-grid,.trending-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.library-game-art{height:190px}.library-game-body{padding:0 15px 15px}.trending-card-art{height:210px}.trending-card-body{padding:2px 15px 16px}
}

@media (max-width: 620px) {
  .footer-columns { grid-template-columns:1fr 1fr; gap:30px 24px; }
  .footer-brand-block { grid-column:1 / -1; }
  .footer-link-column:last-child { grid-column:1 / -1; }
  .footer-link-column:last-child { columns:2; column-gap:24px; }
  .footer-link-column:last-child h3 { column-span:all; }
  .lobby-footer .footer-bottom { align-items:flex-start; flex-direction:column; }
  .footer-bottom-actions { width:100%; justify-content:space-between; }
  .library-heading{display:grid;gap:20px}.library-count{width:max-content}.library-game-grid,.trending-game-grid{grid-template-columns:1fr}.library-game-art{height:220px}.library-heading p{max-width:310px;line-height:1.55}.trending-live-key{max-width:280px}.trending-card-art{height:235px}
}

@media (max-width: 520px) {
  .lobby-brand { gap:0; }
  .lobby-brand > span:last-child { display:none; }
}

@media (max-width: 900px) {
  .game-library { padding:36px 20px 72px; }
  .library-heading,.library-game-grid { max-width:760px; }
  .library-game-grid { gap:18px; }
  .library-game-art { height:215px; }
  .library-game-art img { padding:32px; }
  .library-game-body { padding:0 18px 18px; }
  .library-title-row { min-height:84px; }
  .library-title-row h2 { font-size:21px; }
  .library-title-row > strong { font-size:17px; }
  .library-card-footer b { min-width:132px; }
}

@media (max-width: 760px) {
  .library-game-grid { grid-template-columns:minmax(0,1fr); }
}

@media (max-width: 620px) {
  .game-library { padding:30px 16px 68px; }
  .game-library::before { top:-230px; right:-390px; opacity:.8; }
  .library-heading { position:relative; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px 12px; padding-bottom:24px; }
  .library-heading-copy { min-width:0; }
  .library-heading h1 { margin-top:8px; font-size:44px; }
  .library-heading p { grid-column:1/-1; max-width:330px; font-size:12px; }
  .library-count { min-width:116px; grid-template-columns:1fr; justify-items:start; gap:5px; padding:12px 14px; }
  .library-count strong { font-size:29px; }
  .library-count span { max-width:88px; font-size:8px; }
  .library-heading::after { width:120px; }
  .library-game-grid { padding-top:22px; }
  .library-game-card { border-radius:19px; }
  .library-game-art { height:205px; }
  .library-game-art img { padding:29px 26px; }
  .library-status { top:13px; left:13px; padding:7px 10px; }
  .library-open-icon { top:13px; right:13px; width:36px; height:36px; }
  .library-game-body { padding:0 17px 17px; }
  .library-title-row { min-height:82px; gap:12px; }
  .library-title-row h2 { font-size:21px; }
  .library-title-row > strong { font-size:16px; }
  .library-account-data { gap:12px; padding:17px 0; }
  .library-account-data dt { font-size:9px; }
  .library-account-data dd { font-size:11px; }
  .library-card-footer { gap:8px; }
  .library-card-footer > span { font-size:9px; }
  .library-card-footer b { min-width:122px; min-height:38px; padding:0 12px; font-size:11px; }
}

@media (max-width: 390px) {
  .game-library { padding-right:13px; padding-left:13px; }
  .library-heading { grid-template-columns:minmax(0,1fr) 108px; }
  .library-heading h1 { font-size:40px; }
  .library-game-art { height:190px; }
  .library-title-row { align-items:flex-end; padding:13px 0; }
  .library-title-row > strong span { display:none; }
  .library-account-data { grid-template-columns:1fr; gap:13px; }
  .library-card-footer { align-items:flex-start; flex-direction:column; }
  .library-card-footer b { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-game,.game-card,.game-toast,.hero-photo-layer,.hero-texture-layer,.hero-hover-layer,.playing-cards,.playing-cards span,.library-game-card,.library-game-art img,.library-open-icon,.library-card-footer b,.library-card-footer b svg,.lobby-sidebar,.sidebar-mobile-backdrop,.mobile-menu-button{transition:none}.spin-button,.lobby-vip-card,.hero-circle-motion,.trending-live-key i,.game-library::before,.library-game-card,.library-status i{animation:none}
}

/* Cards use layered surfaces and shadow for separation; keyboard focus remains visible. */
.lobby :where(
  .featured-game,
  .game-card,
  .connected-game-tile,
  .provider-catalog-card,
  .library-game-card,
  .trending-game-card,
  .home-reward-banner,
  .library-count,
  .library-empty,
  .trending-live-key,
  .room-ready,
  .discovery-panel,
  .staff-card,
  .figma-side-card
) { border-color:transparent !important; }
.lobby :where(.provider-catalog-card,.library-game-card,.trending-game-card):hover {
  border-color:transparent !important;
}

@keyframes featured-carousel { to { transform:translateX(calc(-1 * var(--carousel-distance))); } }
@keyframes figma-button-pulse { 0%{scale:1.2;animation-timing-function:ease-out}35.065%{scale:1;animation-timing-function:ease-out}95.855%,100%{scale:1.2} }
@keyframes figma-vip-pulse { 0%{scale:1.2;animation-timing-function:ease-out}38.395%{scale:1;animation-timing-function:ease-out}63.395%,100%{scale:1.2} }
@keyframes figma-hero-circle-rotate { 0%{transform:rotate(-180deg);animation-timing-function:ease-out}100%{transform:rotate(0deg)} }
@keyframes figma-hero-circle-scale { 0%{scale:1.2;animation-timing-function:ease-out}100%{scale:1} }

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

.viewport {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100svh;
  height: 100dvh;
  min-height: 320px;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}

.stage {
  --loader-reel-height: 156.33px;
  --loader-symbol-height: 81px;
  --reel-travel: 486px;
  --reel-last-travel: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  flex: none;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  isolation: isolate;
  background-color: var(--ink);
  background-image:
    radial-gradient(
      ellipse 1070px 1223px at 50% 50%,
      rgba(212, 175, 55, 0.05) 0%,
      rgba(140, 117, 42, 0.40625) 12.02%,
      rgba(103, 87, 35, 0.58437) 18.03%,
      rgba(67, 58, 28, 0.7625) 24.04%,
      rgba(43, 39, 24, 0.88125) 45.675%,
      rgba(19, 19, 19, 1) 63.945%
    ),
    linear-gradient(90deg, var(--ink), var(--ink));
}

.ambient-glow {
  position: absolute;
  z-index: -1;
  top: 434px;
  left: 50%;
  width: 650px;
  height: 400px;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  filter: blur(92px);
  opacity: 0.55;
}

.loader-copy {
  position: absolute;
  top: 233px;
  left: 50%;
  display: flex;
  width: 792px;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  padding-top: 12px;
  text-align: center;
  transform: translateX(-50%) scale(1.2);
  transform-origin: center top;
  animation: settle-copy 2s ease-out infinite;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 13px;
  color: var(--cream);
  font-family: "Fraunces", Georgia, serif;
  font-size: 48px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
}

.brand-accent {
  color: var(--gold);
}

.loader-copy h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 18px;
  color: var(--cream);
  font-family: "Orbitron", "Arial Black", sans-serif;
  font-size: 60px;
  font-weight: 900;
  line-height: 1.3187;
  letter-spacing: -5.16px;
}

.loader-copy h1 span {
  display: block;
}

.loader-copy h1 em {
  color: var(--gold);
  font-style: normal;
}

.loader-description {
  width: 620px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 27.2px;
  white-space: nowrap;
}

.machine {
  position: absolute;
  top: 548px;
  left: 50%;
  display: flex;
  width: 380px;
  flex-direction: column;
  align-items: center;
  gap: 49px;
  transform: translateX(-50%);
}

.orb {
  position: relative;
  display: flex;
  width: 380px;
  height: 217px;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  filter: drop-shadow(0 0 14px rgba(255, 15, 53, 0.42));
}

.orb-ring,
.orb-ring::before,
.orb-ring::after {
  position: absolute;
  pointer-events: none;
  content: "";
  border: 3px solid var(--yellow);
  border-radius: 147.12px;
}

.orb-ring {
  inset: 4px 0;
  box-shadow:
    0 0 10.7px var(--red),
    0 0 35px rgba(255, 12, 49, 0.31),
    inset 0 0 14px rgba(255, 15, 55, 0.14);
}

.orb-ring::before {
  inset: 19px;
  border-width: 2px;
  border-color: rgba(255, 75, 92, 0.45);
}

.orb-ring::after {
  inset: 35px 38px;
  border-width: 2px;
  border-color: rgba(255, 75, 92, 0.45);
  opacity: 0.45;
}

.reels {
  position: relative;
  z-index: 1;
  display: flex;
  width: 273.59px;
  height: 156.33px;
  gap: 10.9px;
}

.reel {
  position: relative;
  width: 83.48px;
  height: 156.33px;
  overflow: hidden;
  border: 2px solid rgba(255, 227, 113, 0.68);
  border-radius: 17.53px;
  background:
    linear-gradient(90deg, #1c020a 0%, #5d0619 20%, #ae0021 50%, #5d0619 80%, #1b020a 100%);
  box-shadow: 0 0 16px rgba(255, 22, 55, 0.4);
}

.reel::before,
.reel::after,
.reel-sheen {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  content: "";
}

.reel::before {
  inset: 0 0 76.49% 0;
  background: linear-gradient(#040004, rgba(4, 0, 4, 0));
}

.reel::after {
  inset: 76.13% 0 0;
  background: linear-gradient(rgba(4, 0, 4, 0), #040004);
}

.reel-sheen {
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 10px 0 18px 2px rgba(0, 0, 0, 0.55), inset -10px 0 18px 2px rgba(0, 0, 0, 0.55);
}

.reel-strip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  animation: reel-scroll 2s linear infinite;
  will-change: transform;
}

.reel:nth-child(2) .reel-strip {
  animation-name: reel-scroll-middle;
  animation-delay: -0.19s;
}

.reel:nth-child(3) .reel-strip {
  animation-name: reel-scroll-last;
  animation-delay: -0.46s;
}

.symbol {
  display: grid;
  width: 79px;
  height: 81px;
  flex: none;
  place-items: center;
  color: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 43px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 18px var(--red), 0 0 8px #fff;
}

.symbol.diamond,
.symbol.club,
.symbol.spade {
  font-size: 43px;
}

.symbol.diamond {
  color: #ff5a5f;
  text-shadow: 0 0 16px var(--red), 0 0 5px #fff;
}

.symbol.club {
  color: #282b30;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 12px var(--red), 0 0 3px #fff;
}

.symbol.spade {
  color: #ffd7d8;
}

.loader-status {
  display: flex;
  width: 246px;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.status-label {
  color: var(--gold);
  font-family: "Inter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 6px;
  line-height: 1;
  text-transform: uppercase;
}

.progress-track {
  position: relative;
  width: 246px;
  height: 2px;
  overflow: visible;
  background: rgba(111, 106, 88, 0.58);
}

.progress-fill {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 2px;
  background: #ff233d;
  box-shadow: 0 0 7px #ff233d;
  animation: progress-pulse 2.63s linear infinite;
}

.enter-button {
  appearance: none;
  border: 0;
  padding: 0;
  color: rgba(182, 133, 166, 0.84);
  background: transparent;
  font-family: "Inter", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.2px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.enter-button:hover,
.enter-button:focus-visible {
  color: #f0c75e;
  text-shadow: 0 0 10px rgba(240, 199, 94, 0.65);
  outline: none;
}

.stage.is-paused * {
  animation-play-state: paused !important;
}

.stage.is-complete .status-label {
  color: #a7db90;
}

.stage.is-complete .enter-button {
  color: #f0c75e;
}

/* Portrait phones and compact windows use natural layout geometry instead of
   shrinking the full 1920x1080 artboard. This keeps the type and reels legible. */
.stage.is-responsive {
  --loader-reel-height: clamp(112px, 39vw, 156.33px);
  --loader-symbol-height: calc(var(--loader-reel-height) * 0.51814);
  --reel-travel: calc(var(--loader-symbol-height) * 6);
  --reel-last-travel: var(--reel-travel);
  display: flex;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5.5dvh, 52px);
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  transform: none;
  background-image:
    radial-gradient(circle at 50% 55%, rgba(145, 119, 35, 0.62), rgba(19, 19, 19, 0.96) 56%),
    linear-gradient(90deg, var(--ink), var(--ink));
}

.stage.is-responsive .ambient-glow {
  top: 49%;
  width: min(92vw, 520px);
  height: min(58vw, 330px);
  filter: blur(60px);
}

.stage.is-responsive .loader-copy,
.stage.is-responsive .machine {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.stage.is-responsive .loader-copy {
  width: min(100%, 620px);
  flex: 0 1 auto;
  gap: clamp(10px, 2dvh, 17px);
  padding-top: 0;
  transform-origin: center;
  animation-name: settle-copy-responsive;
}

.stage.is-responsive .brand {
  gap: clamp(7px, 2.5vw, 13px);
  font-size: clamp(28px, 8.8vw, 46px);
  letter-spacing: -0.03em;
}

.stage.is-responsive .loader-copy h1 {
  padding-top: clamp(4px, 1.5dvh, 14px);
  font-size: clamp(36px, 11.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.075em;
}

.stage.is-responsive .loader-description {
  width: min(92vw, 560px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.55;
  white-space: normal;
}

.stage.is-responsive .machine {
  width: min(90vw, 380px);
  flex: 0 0 auto;
  gap: clamp(24px, 4.5dvh, 42px);
}

.stage.is-responsive .orb {
  width: calc(var(--loader-reel-height) * 2.4319);
  height: calc(var(--loader-reel-height) * 1.3881);
  padding: calc(var(--loader-reel-height) * 0.1919) 0;
}

.stage.is-responsive .orb-ring {
  inset: clamp(3px, 1vw, 4px) 0;
}

.stage.is-responsive .orb-ring::before {
  inset: calc(var(--loader-reel-height) * 0.1215);
}

.stage.is-responsive .orb-ring::after {
  inset:
    calc(var(--loader-reel-height) * 0.2239)
    calc(var(--loader-reel-height) * 0.2431);
}

.stage.is-responsive .reels {
  width: calc(var(--loader-reel-height) * 1.75);
  height: var(--loader-reel-height);
  gap: calc(var(--loader-reel-height) * 0.0697);
}

.stage.is-responsive .reel {
  width: calc(var(--loader-reel-height) * 0.534);
  height: var(--loader-reel-height);
  border-radius: calc(var(--loader-reel-height) * 0.1121);
}

.stage.is-responsive .symbol,
.stage.is-responsive .symbol.diamond,
.stage.is-responsive .symbol.club,
.stage.is-responsive .symbol.spade {
  width: calc(var(--loader-reel-height) * 0.5053);
  height: var(--loader-symbol-height);
  font-size: clamp(31px, 10.5vw, 43px);
}

.stage.is-responsive .loader-status,
.stage.is-responsive .progress-track {
  width: min(68vw, 246px);
}

.stage.is-responsive .status-label {
  font-size: clamp(10px, 2.9vw, 11px);
  letter-spacing: clamp(4px, 1.5vw, 6px);
}

.stage.is-responsive .enter-button {
  min-height: 28px;
  padding: 8px 12px;
  font-size: 11px;
}

@media (max-height: 560px) and (orientation: landscape) {
  .stage.is-responsive {
    --loader-reel-height: clamp(100px, 28dvh, 134px);
    flex-direction: row;
    gap: clamp(24px, 6vw, 72px);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .stage.is-responsive .loader-copy {
    width: min(43vw, 430px);
    align-items: flex-start;
    text-align: left;
  }

  .stage.is-responsive .loader-copy h1 {
    align-items: flex-start;
    font-size: clamp(34px, 7.2vw, 52px);
  }

  .stage.is-responsive .loader-description {
    width: 100%;
    font-size: clamp(12px, 1.8vw, 15px);
  }

  .stage.is-responsive .machine {
    width: auto;
    gap: clamp(15px, 3dvh, 24px);
  }
}

.casino-shell {
  min-height: 100vh;
  color: #ede6d6;
  background: #080b0d;
  opacity: 0;
  transition: opacity 360ms ease;
}

.casino-shell.is-visible {
  opacity: 1;
}

.viewport.is-exited {
  display: none;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 74px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.16);
  background: rgba(10, 14, 19, 0.92);
  backdrop-filter: blur(7px);
}

.site-brand,
.footer-brand > div {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ede6d6;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

.site-brand em,
.footer-wordmark em {
  color: #f0c75e;
  font-style: normal;
}

.site-brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 50%;
  color: #9b1b30;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  display: flex;
  width: 242px;
  align-items: center;
  gap: 10px;
  padding: 9px 17px;
  border: 1px solid rgba(77, 70, 53, 0.3);
  border-radius: 12px;
  color: #99907c;
  background: #2a2a2a;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #ede6d6;
  background: transparent;
  font-size: 14px;
}

.search-box input::placeholder { color: #99907c; }

.header-icon,
.profile-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  color: #ede6d6;
  background: transparent;
  cursor: pointer;
}

.header-icon { font-size: 19px; }

.notification::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb4ab;
  content: "";
}

.profile-mark {
  width: 42px;
  height: 45px;
  border: 1px solid #f2ca50;
  border-radius: 21px;
  color: #f4eee7;
  background: radial-gradient(circle at 30% 25%, #8b6722, #31270d 62%, #15130b);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
}

.sidebar {
  position: fixed;
  z-index: 10;
  top: 74px;
  bottom: 0;
  left: 0;
  display: flex;
  width: 296px;
  flex-direction: column;
  align-items: center;
  padding: 22px 20px 181px;
  overflow: auto;
  border-top: 1px solid rgba(250, 204, 21, 0.5);
  background: #000;
}

.side-nav { width: 100%; }

.side-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 9px;
  color: #a9a296;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.side-item span { width: 17px; text-align: center; font-size: 17px; }

.side-item.is-selected {
  color: #ede6d6;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.02));
}

.side-item.is-selected::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 3px;
  border-radius: 3px;
  background: #f2ca50;
  content: "";
}

.side-divider { width: 179px; height: 1px; margin: 16px 0; background: rgba(237, 230, 214, 0.07); }

.vip-card {
  width: 255px;
  padding: 16px;
  border-radius: 12px;
  background: #131313;
}

.vip-card h2 {
  margin: 10px 0 20px;
  color: #f0c75e;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  text-align: center;
}

.vip-card p {
  margin: 0 auto;
  color: #a9a296;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.vip-cta {
  display: block;
  width: max-content;
  margin: 16px auto 0;
  padding: 8px 21px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(#ad0122, #991d2f);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.casino-main {
  width: calc(100% - 296px);
  max-width: 1579px;
  min-height: 100vh;
  margin-left: 296px;
  padding: 0 0 40px;
  background: radial-gradient(ellipse 900px 670px at 48% 0%, rgba(37, 51, 25, 0.15), transparent 70%);
}

.hero-banner {
  position: relative;
  height: 260px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(0, 88, 53, 0.92), rgba(0, 75, 45, 0.75)),
    url("assets/fortune-spin/hero-overlay.png") center / cover;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.hero-copy { position: absolute; top: 47px; left: 99px; z-index: 2; }

.hero-copy h1 {
  margin: 0 0 10px;
  color: #ede6d6;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 0.79;
  letter-spacing: -0.5px;
}

.hero-copy h1 em {
  color: #f2ca50;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
}

.hero-copy p { margin: 0; color: #ede6d6; font-size: 15px; line-height: 26.25px; }

.hero-vip-art { position: absolute; top: 28px; left: 49%; width: 601px; opacity: 0.5; }
.hero-ring { position: absolute; top: 43px; right: 380px; display: grid; width: 65px; height: 65px; place-items: center; border: 3px solid #c9a227; border-radius: 50%; color: #d9a928; font-size: 13px; transform: rotate(-12deg); }
.hero-chip { position: absolute; z-index: 2; display: grid; place-items: center; border: 7px dashed #fff; border-radius: 50%; color: #fff; box-shadow: 0 20px 17px rgba(0, 0, 0, 0.42); }
.hero-chip-blue { top: 20px; right: 400px; width: 62px; height: 62px; background: #0a5b9e; font-size: 35px; }
.hero-chip-gold { right: 310px; bottom: 24px; width: 42px; height: 42px; background: #f0b500; font-size: 18px; }
.hero-chip-red { right: 112px; bottom: 12px; width: 45px; height: 45px; border-style: solid; border-color: #7e151e; background: #a51c25; font-size: 29px; }
.hero-fan-card { position: absolute; top: 25px; right: 120px; z-index: 2; padding: 12px 10px; border-radius: 8px; color: #9b1b30; background: linear-gradient(160deg, #fff, #ede6d6); font-family: "Fraunces", Georgia, serif; font-size: 20px; transform: rotate(27deg); box-shadow: 0 14px 13px rgba(0, 0, 0, 0.45); }

.category-pills { display: flex; justify-content: center; gap: 12px; padding: 25px 0 10px; }
.category-pill { padding: 9px 16px; border: 1px solid rgba(237, 230, 214, 0.25); border-radius: 999px; color: #a9a296; background: #0a0e13; font-size: 13px; cursor: pointer; }
.category-pill.is-active { border-color: transparent; color: #181203; background: linear-gradient(#f0c75e, #c9a227); }

.game-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; padding: 0 0 10px; }
.feature-art-card, .side-art-card { position: relative; overflow: hidden; border-radius: 8px; }
.feature-art-card { min-height: 390px; }
.feature-art-card img, .side-art-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-play-button { position: absolute; right: 24px; bottom: 24px; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #f2ca50; border-radius: 12px; color: #fff; background: rgba(242, 202, 80, 0.5); font-size: 24px; cursor: pointer; }
.side-game-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px; }
.side-art-card { min-height: 183px; }
.art-arrow { position: absolute; right: 20px; bottom: 17px; border: 0; color: #ede6d6; background: transparent; font-size: 32px; cursor: pointer; }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 68px; margin-top: -1px; border: 1px solid rgba(77, 70, 53, 0.3); border-radius: 14px; background: rgba(10, 20, 17, 0.92); }
.trust-strip > div { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-right: 1px solid rgba(77, 70, 53, 0.2); }
.trust-strip > div:last-child { border-right: 0; }
.trust-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #18a46f; background: rgba(24, 164, 111, 0.1); }
.trust-strip p { margin: 0; }
.trust-strip strong, .trust-strip small { display: block; }
.trust-strip strong { color: #ede6d6; font-size: 12px; font-weight: 500; }
.trust-strip small { margin-top: 4px; color: #77786e; font-size: 10px; }

.content-section { padding-top: 34px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 17px; }
.section-heading h2 { margin: 0; color: #ede6d6; font-size: 28px; font-weight: 500; }
.section-heading h2 em { color: #f2ca50; font-style: normal; }
.section-heading p { margin: 5px 0 0; color: #a9a296; font-size: 11px; }
.section-heading > a { color: #f2ca50; font-size: 11px; text-decoration: none; }
.section-heading.compact { padding-bottom: 9px; }
.spin-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.spin-card { display: flex; min-height: 64px; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(77, 70, 53, 0.3); border-radius: 10px; background: rgba(13, 17, 18, 0.86); }
.spin-card p { margin: 0; }
.spin-card strong, .spin-card small { display: block; white-space: nowrap; }
.spin-card strong { color: #ede6d6; font-size: 11px; font-weight: 500; }
.spin-card small { margin-top: 4px; color: #77786e; font-size: 9px; }
.ball { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; color: #fff; font-size: 10px; }
.ball.red { background: #b6253c; }.ball.black { background: #171a1d; }.ball.green { background: #0e8b62; }

.featured-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-top: 2px; border-top: 1px solid rgba(201, 162, 39, 0.55); }
.game-tile { aspect-ratio: 1 / 1; overflow: hidden; padding: 0; border: 0; border-radius: 14px; background: #222; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.game-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-tile:hover, .game-tile.is-picked { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0, 0, 0, 0.32); }

.site-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 54px; padding: 28px 52px 0; margin-top: 20px; border-top: 1px solid rgba(201, 162, 39, 0.55); }
.footer-wordmark { font-family: "Fraunces", Georgia, serif; font-size: 27px; }
.footer-brand > div { gap: 14px; }
.footer-brand p { margin: 20px 0 0; color: #ede6d6; font-size: 14px; }.footer-brand p b { color: #f2ca50; }
.footer-brand .footer-note { max-width: 250px; color: #ede6d6; font-size: 13px; line-height: 20px; }
.social-row { display: flex; gap: 9px; margin-top: 22px; }.social-row a { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 7px; color: #fff; background: #2d6cdf; font-weight: 700; text-decoration: none; }.social-row a:nth-child(2) { background: #d12d95; }.social-row a:nth-child(3) { background: #ff4d16; }.social-row a:nth-child(4) { background: #4b5eb6; }
.footer-links { display: flex; flex-direction: column; gap: 16px; }.footer-links h3 { margin: 0 0 8px; color: #f2ca50; font-size: 16px; letter-spacing: 0.7px; text-transform: uppercase; }.footer-links a { color: #ede6d6; font-size: 13px; text-decoration: none; }
.footer-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 63px; border-top: 1px solid #1a2228; color: #a9a296; font-size: 11px; }.footer-bottom div { display: flex; gap: 39px; }.footer-bottom a { color: #a9a296; text-decoration: none; }.whatsapp { display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #2abf5b; font-size: 23px; }

@media (max-width: 1200px) {
  .sidebar { width: 228px; padding-left: 14px; padding-right: 14px; }
  .casino-main { width: calc(100% - 228px); margin-left: 228px; }
  .vip-card { width: 200px; }.side-item { font-size: 16px; }.hero-copy { left: 56px; }.hero-copy h1 { font-size: 48px; }.hero-vip-art { left: 44%; width: 520px; }.hero-ring { right: 265px; }.hero-chip-blue { right: 285px; }.hero-fan-card { right: 70px; }
  .site-footer { padding-left: 30px; padding-right: 30px; gap: 25px; }
}

@media (max-width: 860px) {
  .site-header { height: 64px; padding: 0 14px; }.site-brand { font-size: 19px; }.site-brand-mark { width: 26px; height: 26px; }.search-box { width: 170px; }
  .sidebar { position: static; width: 100%; height: auto; padding: 10px 14px; border-top: 0; }.side-nav { display: flex; gap: 6px; overflow-x: auto; }.side-item { width: auto; flex: 0 0 auto; padding: 9px 12px; font-size: 13px; }.side-divider, .vip-card { display: none; }
  .casino-main { width: 100%; margin-left: 0; padding: 0 14px 30px; }.hero-banner { height: 270px; }.hero-copy { left: 28px; top: 42px; }.hero-copy h1 { font-size: 44px; }.hero-copy p { font-size: 13px; }.hero-vip-art { left: 38%; top: 85px; width: 500px; }.hero-ring, .hero-fan-card { display: none; }
  .game-grid { grid-template-columns: 1fr; }.side-game-stack { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }.trust-strip { grid-template-columns: repeat(2, 1fr); }.trust-strip > div:nth-child(2) { border-right: 0; }.spin-list { grid-template-columns: repeat(2, 1fr); }.featured-grid { grid-template-columns: repeat(3, 1fr); }.site-footer { grid-template-columns: repeat(2, 1fr); padding: 24px 0 0; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .header-actions .header-icon, .profile-mark { display: none; }.search-box { width: 145px; }.hero-banner { height: 305px; }.hero-copy { left: 22px; top: 34px; }.hero-copy h1 { font-size: 38px; }.hero-copy p { max-width: 280px; }.wide-only { display: none; }.hero-chip { transform: scale(0.8); }.hero-chip-blue { right: 82px; top: 185px; }.hero-chip-gold { right: 24px; bottom: 20px; }.hero-chip-red { right: 8px; bottom: 84px; }.side-game-stack { grid-template-columns: 1fr; }.trust-strip { grid-template-columns: 1fr; }.trust-strip > div { border-right: 0; border-bottom: 1px solid rgba(77, 70, 53, 0.2); }.trust-strip > div:last-child { border-bottom: 0; }.spin-list { grid-template-columns: 1fr; }.featured-grid { grid-template-columns: repeat(2, 1fr); }.site-footer { grid-template-columns: 1fr; }.footer-links { gap: 10px; }.footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 0; }
}

@keyframes settle-copy {
  0% {
    transform: translateX(-50%) scale(1.2);
    animation-timing-function: ease-out;
  }
  99.935%,
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes settle-copy-responsive {
  0% {
    transform: scale(1.08);
    opacity: 0.72;
    animation-timing-function: ease-out;
  }
  99.935%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes reel-scroll {
  0% { transform: translateY(0); }
  61.52%,
  100% { transform: translateY(calc(-1 * var(--reel-travel))); }
}

@keyframes reel-scroll-middle {
  0% { transform: translateY(0); }
  99.935%,
  100% { transform: translateY(calc(-1 * var(--reel-travel))); }
}

@keyframes reel-scroll-last {
  0% { transform: translateY(0); }
  99.935%,
  100% { transform: translateY(calc(-1 * var(--reel-last-travel))); }
}

@keyframes progress-pulse {
  0% { transform: translateX(-202px); }
  3.8% { transform: translateX(-189px); }
  50% { transform: translateX(-65px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-copy,
  .reel-strip,
  .progress-fill {
    animation: none !important;
  }
}