/* =========================================================
   LuckyGames — neon arcade
   Palette: midnight indigo base, electric blue → violet → hot pink
   Type: Bungee (display) / Orbitron (utility) / Chakra Petch (body)
   ========================================================= */

:root{
  --night:   #000000;
  --deep:    #07060B;
  --panel:   #121018;
  --panel-2: #1C1726;

  --blue:    #2BA8FF;
  --indigo:  #5B3BFF;
  --purple:  #A03BFF;
  --pink:    #FF3DA6;
  --cyan:    #4FF0FF;

  --text:    #F2ECFF;
  --muted:   #A99CD8;
  --faint:   #6D5FA8;

  --edge:      rgba(160,59,255,.30);
  --edge-soft: rgba(160,59,255,.16);

  --sweep: linear-gradient(100deg, var(--blue) 0%, var(--indigo) 35%, var(--purple) 65%, var(--pink) 100%);

  --topbar-h: clamp(72px, 9.5vw, 104px);
  --wrap:     1320px;
  --radius:   16px;

  --font-display: "Bungee", "Impact", sans-serif;
  --font-util:    "Orbitron", "Segoe UI", sans-serif;
  --font-body:    "Chakra Petch", "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--purple); color:#fff; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--deep); }
::-webkit-scrollbar-thumb{
  background:var(--sweep);
  border-radius:99px;
  border:2px solid var(--deep);
}
::-webkit-scrollbar-thumb:hover{ background:var(--pink); }

:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
  border-radius:8px;
}

.lg-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:var(--night);
  padding:.7rem 1.1rem; font-weight:700;
}
.lg-skip:focus{ left:12px; top:12px; }

/* =========================================================
   AMBIENT BACKGROUND — drifting aurora + perspective floor + stars
   ========================================================= */
.lg-aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.lg-blob{
  position:absolute;
  width:58vmax; height:58vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.lg-blob--blue{
  background:radial-gradient(circle, #2BA8FF 0%, rgba(43,168,255,0) 70%);
  top:-22vmax; left:-14vmax;
  animation:drift1 24s ease-in-out infinite;
}
.lg-blob--purple{
  background:radial-gradient(circle, #A03BFF 0%, rgba(160,59,255,0) 70%);
  top:6vmax; right:-20vmax;
  animation:drift2 30s ease-in-out infinite;
}
.lg-blob--pink{
  background:radial-gradient(circle, #FF3DA6 0%, rgba(255,61,166,0) 70%);
  bottom:-26vmax; left:24vmax;
  animation:drift3 27s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{ transform:translate3d(0,0,0)        scale(1); }
  50%    { transform:translate3d(9vmax,7vmax,0) scale(1.14); }
}
@keyframes drift2{
  0%,100%{ transform:translate3d(0,0,0)          scale(1.06); }
  50%    { transform:translate3d(-8vmax,10vmax,0) scale(.92); }
}
@keyframes drift3{
  0%,100%{ transform:translate3d(0,0,0)          scale(.95); }
  50%    { transform:translate3d(7vmax,-9vmax,0)  scale(1.16); }
}

/* neon grid floor — the arcade horizon */
.lg-grid-floor{
  position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:0;
  pointer-events:none;
  perspective:200px;
  overflow:hidden;
  opacity:.35;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 92%);
          mask-image:linear-gradient(to top, #000 0%, transparent 92%);
}
.lg-grid-floor::before{
  content:"";
  position:absolute; left:-60%; right:-60%; top:0; height:340%;
  transform:rotateX(66deg);
  transform-origin:top center;
  background-image:
    linear-gradient(to right, rgba(79,240,255,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,59,255,.55) 1px, transparent 1px);
  background-size:64px 64px;
  animation:floorRun 7s linear infinite;
}
@keyframes floorRun{
  from{ background-position:0 0; }
  to  { background-position:0 64px; }
}

.lg-stars{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.lg-star{
  position:absolute;
  border-radius:50%;
  background:#fff;
  opacity:0;
  animation-name:twinkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0;   transform:scale(.4); }
  50%    { opacity:.85; transform:scale(1); }
}

/* everything above the ambient layers */
.lg-topbar, main, .lg-footer{ position:relative; z-index:2; }

/* =========================================================
   TOPBAR (sticky)
   ========================================================= */
.lg-topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(7,4,23,.94) 0%, rgba(7,4,23,.80) 100%);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--edge-soft);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.lg-topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--sweep);
  background-size:200% 100%;
  animation:sweepSlide 6s linear infinite;
  box-shadow:0 0 14px rgba(160,59,255,.85);
}
@keyframes sweepSlide{
  from{ background-position:0% 50%; }
  to  { background-position:200% 50%; }
}
.lg-topbar__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  min-height:var(--topbar-h);
  padding:.55rem clamp(.8rem, 3vw, 1.6rem);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}

/* ---------- brand ---------- */
.lg-brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.lg-brand__logo{
  display:block;
  height:clamp(52px, 7.5vw, 80px);
  width:clamp(130px, 19vw, 200px);
  object-fit:cover;
  object-position:50% 50%;
  filter:drop-shadow(0 6px 18px rgba(160,59,255,.5));
  transition:transform .3s ease;
}
.lg-brand:hover .lg-brand__logo{ transform:scale(1.05); }

/* ---------- buttons (3D) ---------- */
.lg-nav{ display:flex; align-items:center; gap:.55rem; }

.lg-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body);
  font-weight:700; font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.65rem 1.1rem;
  border-radius:12px;
  border:1px solid transparent;
  white-space:nowrap;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, background .25s ease, color .2s ease;
}
/* shine sweep */
.lg-btn::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-70%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-22deg);
  transition:left .55s ease;
}
.lg-btn:hover::after{ left:130%; }

.lg-btn--neon{
  color:#FFFFFF;
  background:var(--sweep);
  background-size:180% 100%;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 4px 0 #4A1180, 0 10px 26px rgba(160,59,255,.55);
  animation:sweepSlide 5s linear infinite;
}
.lg-btn--neon:hover{
  transform:translateY(-3px);
  box-shadow:0 7px 0 #4A1180, 0 16px 36px rgba(255,61,166,.6);
}
.lg-btn--neon:active{ transform:translateY(2px); box-shadow:0 2px 0 #4A1180; }

.lg-btn--ghost{
  color:#CFE9FF;
  background:rgba(91,59,255,.14);
  border-color:var(--edge);
  box-shadow:0 3px 0 rgba(58,15,110,.85);
}
.lg-btn--ghost:hover{
  color:#FFFFFF;
  background:rgba(160,59,255,.28);
  border-color:var(--cyan);
  transform:translateY(-3px);
  box-shadow:0 6px 0 rgba(58,15,110,.85), 0 12px 28px rgba(79,240,255,.3);
}
.lg-btn--ghost:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(58,15,110,.85); }

.lg-btn--lg{ padding:.9rem 1.7rem; font-size:1rem; }

/* =========================================================
   HERO
   ========================================================= */
.lg-hero{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(.9rem,3vw,1.6rem) clamp(1rem,3vw,1.8rem);
}

/* ---------- 3D banner carousel (signature) ---------- */
.lg-carousel{
  position:relative;
  border-radius:20px;
  margin-bottom:clamp(1.8rem,4vw,3rem);
}
.lg-carousel__stage{
  position:relative;
  aspect-ratio:1280 / 300;
  perspective:1200px;
  border-radius:20px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--edge);
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 46px rgba(160,59,255,.28);
}
.lg-slide{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateY(38deg) scale(.86);
  opacity:0;
  pointer-events:none;
  transition:transform .75s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.lg-slide img{ width:100%; height:100%; object-fit:cover; }
.lg-slide.is-prev{ transform:rotateY(-38deg) scale(.86); }
.lg-slide.is-active{
  transform:rotateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
/* glossy sheen travelling across the active banner */
.lg-slide.is-active::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translateX(-100%);
  animation:bannerSheen 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bannerSheen{
  0%,62%{ transform:translateX(-100%); }
  92%,100%{ transform:translateX(100%); }
}

.lg-carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:rgba(13,8,40,.72);
  border:1px solid var(--edge);
  backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.lg-carousel__arrow svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.lg-carousel__arrow:hover{
  background:rgba(160,59,255,.6);
  border-color:var(--cyan);
  transform:translateY(-50%) scale(1.12);
}
.lg-carousel__arrow--prev{ left:12px; }
.lg-carousel__arrow--next{ right:12px; }

.lg-carousel__dots{
  display:flex; justify-content:center; gap:.55rem;
  margin-top:1rem;
}
.lg-dot{
  width:34px; height:6px;
  border-radius:99px; border:0; padding:0;
  cursor:pointer;
  background:rgba(160,59,255,.28);
  transition:background .25s ease, box-shadow .25s ease, width .25s ease;
}
.lg-dot:hover{ background:rgba(160,59,255,.6); }
.lg-dot.is-active{
  width:52px;
  background:var(--sweep);
  box-shadow:0 0 14px rgba(255,61,166,.75);
}

/* ---------- hero copy ---------- */
.lg-hero__copy{ text-align:center; max-width:760px; margin-inline:auto; }

.lg-eyebrow{
  font-family:var(--font-util);
  font-weight:700;
  font-size:clamp(.6rem,2vw,.72rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 1rem;
  text-shadow:0 0 16px rgba(79,240,255,.75);
}

.lg-hero__title{
  font-family:var(--font-display);
  font-size:clamp(2rem,7.4vw,4.2rem);
  line-height:1.06;
  margin:0 0 1rem;
  background:linear-gradient(100deg,#8FD6FF 0%,#C79BFF 32%,#FF9AD5 62%,#8FD6FF 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweepSlide 8s linear infinite;
  filter:drop-shadow(0 4px 0 rgba(58,15,110,.9)) drop-shadow(0 0 34px rgba(160,59,255,.55));
}

.lg-hero__sub{
  max-width:52ch; margin:0 auto 1.9rem;
  color:var(--muted);
  font-size:clamp(.95rem,2.4vw,1.08rem);
}

.lg-hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* pulsing glow on the primary hero CTA to draw the eye */
.lg-btn--pulse{ animation:sweepSlide 5s linear infinite, ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 4px 0 #4A1180, 0 10px 26px rgba(160,59,255,.55); }
  50%    { box-shadow:0 4px 0 #4A1180, 0 14px 40px rgba(255,61,166,.75); }
}

/* ---------- trust strip ---------- */
.lg-trust{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem;
  margin:1.9rem 0 0; padding:0;
  font-family:var(--font-util);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.lg-trust li{ display:flex; align-items:center; gap:.5rem; transition:transform .25s ease; }
.lg-trust li:hover{ transform:translateY(-2px) scale(1.06); }
.lg-trust__num{
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:0;
  background:var(--sweep);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}

/* =========================================================
   STEPS (play.html — buy points / play game)
   ========================================================= */
.lg-steps{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.4rem) clamp(.9rem,3vw,1.6rem) clamp(3.5rem,7vw,6rem);
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(1rem,3vw,2rem);
  flex-wrap:wrap;
}
.lg-step{
  position:relative;
  flex:1 1 320px;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2.4rem 1.8rem 2.2rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)) padding-box,
    var(--sweep) border-box;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.lg-step:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(0,0,0,.6), 0 0 36px rgba(160,59,255,.5);
}
.lg-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--sweep);
  font-family:var(--font-display);
  font-size:1.35rem;
  color:#fff;
  margin-bottom:1.1rem;
  box-shadow:0 0 22px rgba(160,59,255,.55);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.lg-step:hover .lg-step__num{ transform:scale(1.1) rotate(-6deg); }
.lg-step h2{
  font-family:var(--font-display);
  font-size:1.35rem;
  margin:0 0 .7rem;
  background:linear-gradient(180deg,#FFFFFF 0%,#C79BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(58,15,110,.9));
}
.lg-step p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
  margin:0 0 1.7rem;
}
.lg-step .lg-btn{ width:100%; }

.lg-step__arrow{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  color:var(--purple);
  filter:drop-shadow(0 0 10px rgba(160,59,255,.6));
}
.lg-step__arrow svg{
  width:32px; height:32px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:760px){
  .lg-step__arrow svg{ transform:rotate(90deg); }
}

/* =========================================================
   GUIDE STEPS (buy-points-guide.html — step + video)
   ========================================================= */
.lg-guide-steps{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(1rem,3vw,1.6rem) clamp(.9rem,3vw,1.6rem) clamp(2rem,5vw,3rem);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,1.8rem);
}
@media (max-width:960px){
  .lg-guide-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .lg-guide-steps{ grid-template-columns:1fr; }
}
.lg-guide-step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:1.6rem clamp(1rem,2.4vw,1.6rem);
  border-radius:var(--radius);
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)) padding-box,
    var(--sweep) border-box;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.lg-guide-step:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 32px rgba(160,59,255,.5);
}
.lg-guide-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--sweep);
  font-family:var(--font-display);
  font-size:1.1rem;
  color:#fff;
  margin-bottom:.9rem;
  box-shadow:0 0 22px rgba(160,59,255,.55);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.lg-guide-step:hover .lg-guide-step__num{ transform:scale(1.1) rotate(-6deg); }
.lg-guide-step__body{ width:100%; }
.lg-guide-step__body h2{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.3;
  margin:.15rem 0 .6rem;
  background:linear-gradient(180deg,#FFFFFF 0%,#C79BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(58,15,110,.9));
}
.lg-guide-step__body p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
  margin:0 0 1.2rem;
}
.lg-guide-step__video{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--deep);
  border:1px solid var(--edge-soft);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.lg-guide-step__video video{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
}
.lg-guide-step__image{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--deep);
  border:1px solid var(--edge-soft);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.lg-guide-step__image img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .5s ease;
}
.lg-guide-step:hover .lg-guide-step__video,
.lg-guide-step:hover .lg-guide-step__image{
  border-color:var(--cyan);
  box-shadow:0 0 22px rgba(79,240,255,.28);
}
.lg-guide-step:hover .lg-guide-step__image img{ transform:scale(1.04); }
.lg-guide-step .lg-btn{ margin-top:.4rem; }
@media (max-width:560px){
  .lg-guide-step{ grid-template-columns:44px 1fr; }
  .lg-guide-step__num{ width:40px; height:40px; font-size:1.05rem; }
}

.lg-guide-bottom-cta{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:0 clamp(.9rem,3vw,1.6rem) clamp(3.5rem,7vw,6rem);
  display:flex;
  justify-content:center;
}

/* =========================================================
   GAME FLOOR
   ========================================================= */
.lg-floor{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(1.2rem,3vw,2rem) clamp(.9rem,3vw,1.6rem) clamp(3rem,7vw,5rem);
}

.lg-floor__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem;
  margin-bottom:1.7rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--edge-soft);
}
.lg-floor__headline{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }

.lg-section-title{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,4.4vw,2.1rem);
  margin:0;
  background:linear-gradient(180deg,#FFFFFF 0%,#C79BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(58,15,110,.9)) drop-shadow(0 0 22px rgba(160,59,255,.5));
}

.lg-chip{
  font-family:var(--font-util);
  font-weight:700;
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--cyan);
  border:1px solid var(--edge);
  background:rgba(79,240,255,.07);
  border-radius:99px;
  padding:.45rem .8rem;
  white-space:nowrap;
  box-shadow:0 0 16px rgba(79,240,255,.16) inset;
}

/* ---------- search ---------- */
.lg-search{ position:relative; flex:1 1 220px; max-width:300px; }
.lg-search__icon{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px;
  fill:none; stroke:var(--purple); stroke-width:2; stroke-linecap:round;
  pointer-events:none;
}
.lg-search__input{
  width:100%;
  font-family:var(--font-body); font-size:.95rem;
  color:var(--text);
  background:rgba(22,16,60,.85);
  border:1px solid var(--edge);
  border-radius:12px;
  padding:.7rem .9rem .7rem 2.35rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.lg-search__input::placeholder{ color:var(--faint); }
.lg-search__input:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(79,240,255,.2);
}

/* ---------- grid ---------- */
.lg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(146px, 1fr));
  gap:.9rem;
}

/* ---------- 3D card ---------- */
.lg-card-wrap{
  perspective:900px;
  opacity:0;
  animation:cardIn .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--delay,0ms);
}

.lg-card{
  position:relative;
  display:block;
  transform-style:preserve-3d;
  transform:
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translateY(var(--ty,0px))
    scale(var(--sc,1));
  border-radius:var(--radius);
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)) padding-box,
    var(--sweep) border-box;
  box-shadow:0 10px 24px rgba(0,0,0,.5);
  transition:box-shadow .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(26px) scale(.94); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}
.lg-card.is-tilting{ transition:box-shadow .3s ease, transform .12s ease-out; }

.lg-card:hover,
.lg-card:focus-visible{
  box-shadow:0 22px 46px rgba(0,0,0,.6), 0 0 34px rgba(160,59,255,.55);
}

.lg-card__shot{
  position:relative;
  aspect-ratio:256 / 309;
  overflow:hidden;
  border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  background:#0A0620;
}

/* ---------- HOT / NEW ribbon ---------- */
.lg-card__badge{
  position:absolute; top:.55rem; left:-.4rem; z-index:3;
  font-family:var(--font-util);
  font-weight:700;
  font-size:.62rem;
  letter-spacing:.12em;
  color:#fff;
  padding:.3rem .6rem .3rem .75rem;
  border-radius:0 6px 6px 0;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.lg-card__badge.is-hot{ background:linear-gradient(100deg, var(--pink), #FF7A3D); }
.lg-card__badge.is-new{ background:linear-gradient(100deg, var(--cyan), var(--blue)); color:#062033; }
.lg-card__shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease, filter .45s ease;
}
.lg-card:hover .lg-card__shot img{ transform:scale(1.07); filter:saturate(1.18) brightness(1.08); }

/* moving light across the artwork = the 3D read */
.lg-card__glare{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(
    260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.10) 32%,
    transparent 62%);
  mix-blend-mode:screen;
}
.lg-card:hover .lg-card__glare{ opacity:1; }

.lg-card__play{
  position:absolute; left:0; right:0; bottom:0;
  padding:.6rem;
  text-align:center;
  font-family:var(--font-util);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.22em;
  color:#fff;
  background:var(--sweep);
  background-size:180% 100%;
  animation:sweepSlide 4s linear infinite;
  transform:translateY(101%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.lg-card:hover .lg-card__play,
.lg-card:focus-visible .lg-card__play{ transform:translateY(0); }

.lg-card__name{
  margin:0;
  padding:.65rem .55rem .75rem;
  text-align:center;
  font-family:var(--font-display);
  font-size:.78rem;
  line-height:1.3;
  color:var(--text);
  border-top:1px solid var(--edge-soft);
  transition:color .25s ease, text-shadow .25s ease;
}
.lg-card:hover .lg-card__name{
  color:#fff;
  text-shadow:0 0 16px rgba(255,61,166,.9);
}

.lg-empty{
  text-align:center;
  color:var(--muted);
  padding:3rem 1rem;
  font-size:1.05rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.lg-footer{
  border-top:1px solid var(--edge-soft);
  background:linear-gradient(180deg, rgba(7,4,23,.2) 0%, rgba(13,8,40,.92) 100%);
}
.lg-footer__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(2rem,5vw,3rem) clamp(.9rem,3vw,1.6rem);
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  text-align:center;
}
.lg-footer__brand{ display:flex; align-items:center; gap:.6rem; }
.lg-footer__logo{ display:block; height:32px; width:auto; }

.lg-footer__nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:center; }
.lg-footer__nav a{
  font-weight:600; font-size:.92rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.lg-footer__nav a:hover{ color:var(--cyan); border-color:var(--pink); }

.lg-responsible{
  display:flex; align-items:center;gap:.9rem;
  max-width:660px;
  text-align:left;
  padding:1.05rem 1.2rem;
  border:1px solid var(--edge-soft);
  border-radius:14px;
  background:rgba(160,59,255,.06);
}
.lg-age{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  border:2px solid var(--pink);
  color:var(--pink);
  font-family:var(--font-display);
  font-size:.92rem;
  box-shadow:0 0 18px rgba(255,61,166,.35);
}
.lg-responsible p{
  align-self:center;
  margin:0;
  font-size:.85rem; line-height:1;
  color:var(--muted);
}
.lg-responsible a{ color:var(--cyan); border-bottom:1px solid rgba(79,240,255,.5); }
.lg-responsible a:hover{ color:#fff; }

.lg-copy{
  margin:0;
  font-size:.8rem; letter-spacing:.05em;
  color:var(--faint);
}

.lg-seo-keywords{
  margin:0;
  max-width:720px;
  font-size:.7rem;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--faint);
  opacity:.65;
  text-align:center;
}
.lg-seo-keywords--games{
  max-width:900px;
  font-size:.64rem;
  opacity:.45;
}

/* =========================================================
   LEGAL / CONTENT PAGES (terms.html, support.html)
   ========================================================= */
.lg-legal{
  max-width:760px;
  margin-inline:auto;
  padding:clamp(1rem,3vw,2rem) clamp(.9rem,3vw,1.6rem) clamp(3rem,7vw,5rem);
  color:var(--text);
}
.lg-legal h2{
  font-family:var(--font-display);
  font-size:1.15rem;
  margin:2.2rem 0 .8rem;
  background:linear-gradient(180deg,#FFFFFF 0%,#C79BFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(58,15,110,.9));
}
.lg-legal h2:first-child{ margin-top:0; }
.lg-legal p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.75;
  margin:0 0 1rem;
}
.lg-legal a{ color:var(--cyan); border-bottom:1px solid rgba(79,240,255,.4); }
.lg-legal a:hover{ color:#fff; }
.lg-legal strong{ color:var(--text); }
.lg-legal ul{ margin:0 0 1rem; padding-left:1.3rem; }
.lg-legal li{ color:var(--muted); font-size:.95rem; line-height:1.75; margin-bottom:.4rem; }
.lg-legal__note{
  margin-top:2.4rem;
  padding:1rem 1.2rem;
  border:1px solid var(--edge-soft);
  border-radius:14px;
  background:rgba(160,59,255,.06);
  font-size:.82rem !important;
  color:var(--faint) !important;
}

/* meta info block (operated by / address / company number / support email) */
.lg-legal__meta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.4rem 1rem;
  margin:0 0 1.6rem;
  padding:1rem 1.2rem;
  border:1px solid var(--edge-soft);
  border-radius:14px;
  background:rgba(22,16,60,.6);
}
.lg-legal__meta dt{
  font-family:var(--font-util);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
  align-self:center;
}
.lg-legal__meta dd{
  margin:0;
  font-size:.88rem;
  color:var(--text);
  align-self:center;
}

/* important callout (points non-refundable / crypto irreversible) */
.lg-legal__important{
  margin:0 0 1.6rem;
  padding:1.1rem 1.3rem;
  border:1.5px solid rgba(255,61,166,.5);
  border-radius:14px;
  background:rgba(255,61,166,.08);
  box-shadow:0 0 24px rgba(255,61,166,.15);
}
.lg-legal__important h2{
  margin:0 0 .5rem;
  font-size:1rem;
  background:linear-gradient(180deg,#fff 0%,#FFC7EC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lg-legal__important p{ margin:0; color:var(--text); }

/* definitions list (section 2) */
.lg-legal__defs{ margin:0 0 1rem; }
.lg-legal__defs dt{
  font-family:var(--font-util);
  font-size:.8rem;
  font-weight:700;
  color:var(--cyan);
  margin-top:.8rem;
}
.lg-legal__defs dt:first-child{ margin-top:0; }
.lg-legal__defs dd{
  margin:.2rem 0 0;
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted);
}

/* inline highlight for placeholder values that still need real business info */
.lg-legal__todo{
  display:inline-block;
  padding:.05rem .4rem;
  border-radius:5px;
  background:rgba(255,196,61,.16);
  border:1px solid rgba(255,196,61,.5);
  color:#FFD778;
  font-size:.85em;
}

/* =========================================================
   SUPPORT CHAT WIDGET
   ========================================================= */
.lg-chat{
  position:fixed;
  right:clamp(1rem,3vw,1.6rem);
  bottom:clamp(1rem,3vw,1.6rem);
  z-index:100;
}
.lg-chat__toggle{
  position:relative;
  width:58px; height:58px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:var(--sweep);
  background-size:180% 100%;
  animation:sweepSlide 5s linear infinite;
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(160,59,255,.55), 0 0 0 6px rgba(160,59,255,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.lg-chat__toggle:hover{ transform:translateY(-2px) scale(1.05); }
.lg-chat__toggle svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; position:absolute; }
.lg-chat__icon-close{ opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease; }
.lg-chat__icon-open{ opacity:1; transform:scale(1); transition:opacity .2s ease, transform .2s ease; }
.lg-chat.is-open .lg-chat__icon-open{ opacity:0; transform:scale(.6); }
.lg-chat.is-open .lg-chat__icon-close{ opacity:1; transform:scale(1); }

.lg-chat__panel{
  position:absolute;
  right:0; bottom:72px;
  width:min(340px, calc(100vw - 2rem));
  height:min(460px, calc(100vh - 7rem));
  display:flex; flex-direction:column;
  border-radius:18px;
  border:1.5px solid var(--edge);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(160,59,255,.25);
  overflow:hidden;
}
.lg-chat__panel[hidden]{ display:none; }
.lg-chat__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem;
  font-family:var(--font-display);
  font-size:.85rem;
  color:#fff;
  background:var(--sweep);
  flex-shrink:0;
}
.lg-chat__close{
  border:0; background:transparent; color:#fff;
  font-size:1.3rem; line-height:1; cursor:pointer;
  padding:0 .2rem;
}
.lg-chat__body{
  flex:1;
  overflow-y:auto;
  padding:.9rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.lg-chat__msg{
  max-width:82%;
  padding:.6rem .8rem;
  border-radius:14px;
  font-size:.85rem;
  line-height:1.5;
}
.lg-chat__msg--bot{
  align-self:flex-start;
  background:rgba(160,59,255,.14);
  border:1px solid var(--edge-soft);
  color:var(--text);
  border-bottom-left-radius:4px;
}
.lg-chat__msg--user{
  align-self:flex-end;
  background:var(--sweep);
  color:#fff;
  border-bottom-right-radius:4px;
}
.lg-chat__msg--bot a{ color:var(--cyan); border-bottom:1px solid rgba(79,240,255,.5); }
.lg-chat__msg--bot a:hover{ color:#fff; }
.lg-chat__quick{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:0 .9rem .7rem;
  flex-shrink:0;
}
.lg-chat__chip{
  border:1px solid var(--edge);
  background:rgba(79,240,255,.06);
  color:var(--cyan);
  font-size:.72rem;
  padding:.35rem .7rem;
  border-radius:99px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lg-chat__chip:hover{ background:rgba(79,240,255,.18); color:#fff; }
.lg-chat__form{
  display:flex; gap:.5rem;
  padding:.8rem;
  border-top:1px solid var(--edge-soft);
  flex-shrink:0;
}
.lg-chat__input{
  flex:1;
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--text);
  background:rgba(22,16,60,.85);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:.6rem .8rem;
}
.lg-chat__input::placeholder{ color:var(--faint); }
.lg-chat__input:focus{ outline:none; border-color:var(--cyan); }
.lg-chat__send{
  width:38px; height:38px; flex-shrink:0;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--sweep);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
}
.lg-chat__send svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:420px){
  .lg-chat__panel{ width:calc(100vw - 1.6rem); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:640px){
  .lg-grid{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:1.15rem; }
  .lg-card__name{ font-size:.85rem; }
}

@media (min-width:1024px){
  .lg-grid{ grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:1.4rem; }
  .lg-card__name{ font-size:.95rem; padding:.8rem .6rem .9rem; }
}

@media (max-width:560px){
  .lg-brand{ gap:.5rem; }
  .lg-btn{ padding:.58rem .72rem; font-size:.76rem; letter-spacing:.03em; }
  .lg-nav{ gap:.4rem; }
  .lg-hero__actions .lg-btn{ flex:1 1 100%; }
  .lg-trust{ gap:.4rem 1rem; font-size:.64rem; }
  .lg-responsible{ flex-direction:column; align-items:center; text-align:center; }
  .lg-search{ max-width:none; }
  .lg-carousel__arrow{ width:36px; height:36px; }
  .lg-carousel__arrow svg{ width:18px; height:18px; }
  .lg-carousel__arrow--prev{ left:8px; }
  .lg-carousel__arrow--next{ right:8px; }
  .lg-dot{ width:26px; }
  .lg-dot.is-active{ width:40px; }
}

/* narrow phones: swap to short button labels so the bar never wraps */
.lg-btn__short{ display:none; }

@media (max-width:440px){
  .lg-btn__full{ display:none; }
  .lg-btn__short{ display:inline; }
  .lg-topbar__inner{ padding-inline:.7rem; gap:.5rem; }
  .lg-nav{ flex-wrap:wrap; justify-content:flex-end; row-gap:.35rem; gap:.35rem; }
  .lg-btn{ padding:.5rem .55rem; font-size:.68rem; }
}

@media (max-width:380px){
  .lg-grid{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lg-stars, .lg-grid-floor{ display:none; }
  .lg-blob{ animation:none; }
  .lg-card-wrap{ opacity:1; animation:none; }
}