/* Corrections from annotated screenshots — original HAR assets only */

/* HEADER: exact HAR icons + gold divider through the centre of the oval nav */
.topbar{border-bottom:0;background:linear-gradient(#272828 0 62px,transparent 62px)}
.topbar::after{content:"";position:absolute;left:0;right:0;top:61px;height:1px;background:#cf9d55;z-index:0;pointer-events:none}
.desktop-nav{top:42px;height:39px;z-index:2}
.brand,.auth,.top-tools,.social-mini{z-index:5}
.search b{display:none}
.search img{width:18px;height:18px;display:block}
.flag-icon{width:24px;height:24px;display:block}
.support-icon{width:24px;height:24px;display:block;opacity:.92}
.telegram-top{width:24px;height:24px;display:block}
.social-mini{gap:8px;top:50px}
.social-mini span{width:23px;height:23px;background:#050505;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}
.social-mini span img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.social-mini span:nth-child(2){padding:5px}
.social-mini span:nth-child(3){padding:4px}

/* HERO: subtle animated Las Vegas background and automatic/manual slides */
.hero-bg{inset:-14px;background:url('assets/video/LasVegas/lasvegas_video.jpg') center 15%/cover no-repeat;filter:brightness(.74);will-change:transform,background-position;animation:vegasMove 18s ease-in-out infinite alternate}
@keyframes vegasMove{0%{transform:scale(1.015);background-position:48% 12%}50%{transform:scale(1.045);background-position:52% 18%}100%{transform:scale(1.02);background-position:49% 23%}}
.hero-slide-img{transition:opacity .32s ease,transform .5s ease}
.hero-slide-img.is-changing{opacity:.15;transform:scale(1.02)}
.hero-title,.hero-subtitle{transition:opacity .25s ease}
.hero-copy.is-changing .hero-title,.hero-copy.is-changing .hero-subtitle{opacity:.08}
.jackpot span.flip{animation:digitPop .36s ease}
@keyframes digitPop{0%{transform:translateY(-2px);filter:brightness(1.9)}55%{transform:translateY(1px)}100%{transform:none;filter:none}}

/* SIDE SLIDERS — arrows are the exact control PNGs from HAR */
.side-slider{position:relative}
.side-arrow{position:absolute;z-index:9;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.side-arrow img{display:block;width:24px;height:24px;object-fit:contain}
.side-prev{left:-13px}.side-next{right:-13px}
.bonus-slider .side-arrow{top:51%}
.bonus-line{position:relative;grid-template-columns:1.45fr .72fr .95fr;gap:5px;overflow:hidden}
.bonus-line .bonus-img{width:100%;height:88px;object-fit:contain;transition:opacity .18s ease}
.bonus-line .bonus-title{text-align:center;color:#fff;line-height:1.05}
.bonus-line button{padding:0 8px;white-space:nowrap}
.month-slider .feature-card>img{transition:opacity .18s ease}
.side-slider.is-changing .bonus-img,.side-slider.is-changing .month-img{opacity:.18}

/* FOOTER layout copied from the proportions on the reference screenshot */
.footer{background:#141414;border-top:1px solid #202020}
.footer-inner{max-width:1088px;min-height:342px;margin:auto;display:grid;grid-template-columns:590px 275px 145px;grid-template-rows:auto 58px 70px;column-gap:39px;row-gap:10px;padding:42px 0 34px;color:#8d99a0;align-items:start}
.footer-links{grid-column:1;grid-row:1;display:grid;grid-template-columns:1.2fr 1.65fr .85fr;gap:20px;line-height:20px;font-size:13px}
.footer-links>div+div{border-left:2px solid #aaa;padding-left:20px}
.footer-clock{grid-column:1;grid-row:2;width:142px;height:49px;border:1px solid #efc688;border-radius:9px;padding:6px 8px;text-align:center;color:#fff}
.footer-clock b{font-size:10px}.footer-clock strong{display:block;color:#f0c487;font:bold 18px Georgia;margin-top:1px}
.apps{grid-column:1;grid-row:3;display:flex;align-items:center;gap:32px;color:#f0c487;font-size:13px}
.store-badges{display:flex;align-items:center;gap:14px}
.store-badges img{width:115px;height:39px;object-fit:contain;display:block}
.footer-social{grid-column:1/3;grid-row:3;justify-self:start;align-self:center;display:flex;align-items:center;gap:12px;color:#8d99a0;margin-left:470px}
.footer-social i{width:37px;height:37px;border-radius:50%;background:#e7d3b1;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}
.footer-social i img{width:100%;height:100%;object-fit:contain;display:block}
.footer-social i:nth-of-type(2){padding:9px}.footer-social i:nth-of-type(3){padding:8px}
.legal{grid-column:2;grid-row:1/4;font-size:9.7px;line-height:14px;padding:0;margin:0;color:#8d99a0}
.legal p{margin:0 0 13px}
.footer-brand{grid-column:3;grid-row:1;text-align:center;margin:0;display:flex;flex-direction:column;align-items:center}
.footer-brand .footer-logo{width:86px;height:auto;display:block;margin:0 auto 3px}
.footer-brand span{color:#d7d7d7;font-size:11px;line-height:16px}
.footer-brand .seals{display:flex;align-items:center;justify-content:center;gap:10px;margin:21px 0 0}
.footer-brand .seals img{width:32px;height:32px;object-fit:contain}
.footer-cga{grid-column:3;grid-row:2/4;align-self:end;justify-self:center;margin-bottom:2px}
.footer-cga img{width:145px;height:92px;object-fit:contain;display:block}

/* MOBILE MENU — use the exact icon artwork present in HAR */
@media(max-width:804px){
  .topbar{background:#272828}.topbar::after{display:none}
  .hero-bg{inset:-8px;background-image:url('assets/images/MobLasVegas514px.jpg');animation:vegasMoveMobile 15s ease-in-out infinite alternate}
  @keyframes vegasMoveMobile{0%{transform:scale(1.02);background-position:46% 45%}100%{transform:scale(1.08);background-position:55% 52%}}
  .menu-shadow{width:80px;background:linear-gradient(rgba(6,6,6,.72),rgba(6,6,6,.83)),url('assets/images/MobLasVegas514px.jpg') center/cover no-repeat;filter:brightness(.72)}
  .menu-panel{left:80px;width:min(315px,calc(100vw - 80px));background:#272828;padding:0 7px 30px}
  .menu-top{height:60px;padding:0 4px}
  .menu-logo{width:63px;height:39px}
  .menu-top .auth{margin-left:7px;gap:6px}
  .menu-top .auth button{height:34px;padding:0 10px}
  .menu-close{width:35px;height:35px;margin-left:auto;position:relative;padding:0;font-size:0}
  .menu-close span{position:absolute;left:7px;top:16px;width:24px;height:2px;background:#f5d38f;border-radius:2px}
  .menu-close span:first-child{transform:rotate(45deg)}.menu-close span:last-child{transform:rotate(-45deg)}
  .jackpot.small{margin:8px auto 0;padding:3px 7px;gap:2px;border-radius:6px}
  .jackpot.small span{font-size:17px;min-width:20px;padding:1px 3px}
  .jack-label{width:128px;margin:0 auto 14px}
  .menu-items{margin-top:0;padding:0 3px}
  .menu-items .menu-row{height:35px;background:linear-gradient(#343434,#252525);display:flex;align-items:center;color:#e9c58d;font-size:14px;text-decoration:none;border-radius:6px;padding:0 8px;margin:1px 0}
  .menu-items .menu-row span{margin-left:10px;flex:1}
  .menu-ico{width:23px;height:23px;object-fit:contain;flex:0 0 23px;display:block}
  .menu-arrow{width:8px;height:3px;object-fit:contain;margin-left:auto;transition:transform .18s ease}
  .menu-group.open>.menu-row .menu-arrow{transform:rotate(180deg)}
  .menu-sub{display:none;background:#202020;margin:0 5px 3px;border-radius:0 0 5px 5px;overflow:hidden}
  .menu-group.open>.menu-sub{display:block}
  .menu-sub a{display:block;color:#cdb184;text-decoration:none;font-size:12px;padding:7px 12px 7px 42px;border-top:1px solid rgba(239,198,136,.08)}
  .menu-items hr{border:0;border-top:1px solid #8a704e;width:82%;margin:11px auto}
  .follow{text-align:center;color:#777;margin:23px 0 9px}
  .menu-social{display:flex;justify-content:center;align-items:center;gap:28px;word-spacing:0}
  .menu-social img{width:23px;height:23px;object-fit:contain;display:block}
  .menu-social img:nth-child(2){width:24px;height:24px}
  .side-arrow{width:22px;height:22px}.side-arrow img{width:22px;height:22px}
  .side-prev{left:calc(50% - 144px)}.side-next{right:calc(50% - 144px)}

  /* keep the compact mobile footer from the original clone, but with exact assets */
  .footer-inner{min-height:0;display:flex;flex-direction:column;padding:20px 28px 30px;text-align:left}
  .footer-links,.footer-clock,.apps,.footer-social{display:none}
  .footer-cga{order:-2;align-self:center;margin:0 0 20px}
  .footer-cga img{width:145px;height:auto}
  .legal{display:block;order:-1;font-size:10px;line-height:14px;width:100%}
  .footer-brand{order:2;display:flex;width:100%;margin:4px 0 20px}
  .footer-brand .footer-logo{width:52px;height:52px;object-fit:contain}
  .footer-brand .seals{margin:12px 0 0}
  .footer-brand .seals img{width:42px;height:42px}
}

@media(max-width:390px){
  .menu-panel{left:70px;width:calc(100vw - 70px)}.menu-shadow{width:70px}
  .menu-top .auth button{padding:0 7px;font-size:11px}
}

/* =========================================================
   SECOND ANNOTATED CORRECTIONS
   ========================================================= */

/* Desktop category rail: one continuous light metallic oval behind all 4 round icons. */
@media(min-width:805px){
  .categories{isolation:isolate}
  .categories::before{
    content:"";
    position:absolute;
    left:-122px;
    right:-122px;
    top:52px;
    height:63px;
    border-radius:34px;
    background:linear-gradient(180deg,#f1efeb 0%,#d7d1ca 16%,#b8b1a8 43%,#d0b98e 69%,#f3c978 86%,#d9b273 100%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 4px rgba(126,84,32,.32),0 1px 3px rgba(0,0,0,.7);
    z-index:0;
    pointer-events:none;
  }
  .cat{z-index:1;background:none}
}

/* Social buttons: exact HAR silhouettes, but dark on the pale metallic circles from the reference. */
.menu-social span,.footer-social i{
  background:linear-gradient(180deg,#f0ede7 0%,#e6d7bf 45%,#e4c690 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.72);
}
.menu-social span img,.footer-social i img{filter:none}

@media(max-width:804px){
  /* Lower the CTA so its lower edge sits on the bottom edge of the oval. */
  .hero-frame .participate{bottom:-7px}

  /* Mobile category layout from the target screenshot: outside icons alternate left/right. */
  .categories{gap:5px 4px;padding:5px 5px 9px}
  .cat{
    height:34px;
    border:1px solid #e6bd73;
    border-radius:2px;
    background:linear-gradient(#343434,#1b1b1b);
    overflow:visible;
  }
  .cat:nth-child(even){flex-direction:row-reverse}
  .cat-ring{
    width:34px;height:34px;flex:0 0 34px;
    margin:-1px;
    border:1px solid #e6bd73;
    border-radius:50%;
    background:#111;
    box-shadow:inset 0 0 0 2px #070707,0 0 0 1px #111;
    position:relative;z-index:2;
    overflow:hidden;
  }
  .cat-ring img{width:31px;height:31px;object-fit:contain}
  .cat b{
    height:32px;line-height:32px;
    background:transparent;
    color:#e7bd79;
    font-size:12px;
    min-width:0;
  }

  /* Menu social block + local time / language at the bottom. */
  .menu-social{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:2px}
  .menu-social span{
    width:35px;height:35px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    padding:0;overflow:hidden;
  }
  .menu-social span img{display:block;object-fit:contain}
  .menu-social span:nth-child(1) img{width:21px;height:20px}
  .menu-social span:nth-child(2) img{width:15px;height:15px}
  .menu-social span:nth-child(3) img{width:22px;height:22px}
  .menu-local-time{
    width:142px;height:49px;
    border:1px solid #efc688;border-radius:8px;
    margin:28px auto 14px;
    padding:6px 8px;
    text-align:center;color:#fff;
    background:#272828;
  }
  .menu-local-time b{display:block;font-size:10px;line-height:12px;color:#fff}
  .menu-local-time strong{display:block;color:#efc27b;font:bold 18px/20px Georgia,serif;margin-top:1px}
  .menu-language{
    display:flex;align-items:center;gap:10px;
    min-height:27px;margin:0 4px 4px;
    color:#fff;font-size:14px;
  }
  .menu-language img{width:24px;height:24px;display:block}

  /* Keep the panel long enough for the new bottom controls; short screens can scroll naturally. */
  .menu-panel{padding-bottom:14px}
}