/* Super Pops Games: shared site styles (glass-prism look, after Shape-a-gon Tower) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:light;
  --ground:#eef1f8;
  --ink:#2c3150;--ink-md:#545a7c;--ink-lt:#8a8fae;
  --violet:#5b4fd6;--violet-dk:#4a3fc0;--violet-lt:#e9e6ff;
  --glass:rgba(255,255,255,.62);--glass-hi:rgba(255,255,255,.85);
  --line:rgba(91,79,214,.16);--line-hi:rgba(255,255,255,.9);
  --prism:linear-gradient(90deg,#ff9ac1,#ffd38a,#a8f0c6,#8fd3ff,#b6a3ff);
  --sh:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -18px rgba(60,52,140,.28);
  --shH:0 1px 0 rgba(255,255,255,.9) inset,0 26px 50px -18px rgba(60,52,140,.38);
  --rad:24px;
  --head:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  font-family:var(--body);color:var(--ink);background:var(--ground);min-height:100vh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6;
}
/* faint star dust, like the game's sky */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(900px 520px at 85% -8%,rgba(182,163,255,.38),transparent 60%),
    radial-gradient(700px 480px at -10% 18%,rgba(143,211,255,.32),transparent 60%),
    radial-gradient(800px 560px at 50% 110%,rgba(255,154,193,.20),transparent 60%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 64%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 46% 14%,#fff,transparent),radial-gradient(1px 1px at 63% 42%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 78% 76%,#fff,transparent),radial-gradient(1px 1px at 90% 30%,#fff,transparent),
    radial-gradient(1px 1px at 36% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 6% 80%,#fff,transparent)}
.w{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--violet)}
img{max-width:100%}

/* logo: glass hexagon with a play arrow */
.sp-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.sp-logo .mark{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 6px 10px rgba(91,79,214,.25))}
.sp-logo .wm{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:.22em;text-transform:uppercase;line-height:1}

/* header */
.top{position:sticky;top:0;z-index:20;padding:14px 0}
nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px 10px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line-hi);
  box-shadow:var(--sh);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
nav ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap}
nav ul a{display:block;text-decoration:none;color:var(--ink-md);font-family:var(--head);font-weight:500;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;transition:background .2s,color .2s}
nav ul a:hover{color:var(--violet);background:rgba(255,255,255,.7)}
nav ul a.on{color:var(--violet);background:#fff;box-shadow:0 0 0 1px var(--line)}

/* type */
.eyebrow{font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--violet)}
.eyebrow .dot{display:inline-block;margin:0 .6em;opacity:.6}
.title{font-family:var(--head);font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.12}
.title b{font-weight:600;background:linear-gradient(90deg,#7a6cf0,#5b4fd6 40%,#3fa6e8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink-md);font-size:17px;max-width:520px}

/* hero */
.hero{overflow-x:clip;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:48px 0 40px}
.hero .title{font-size:clamp(34px,6vw,60px);margin:16px 0 18px}
.hero .lede{margin-bottom:30px}
.hero-art{position:relative;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.hero-art svg{width:100%;height:100%;overflow:visible}
.beam{position:absolute;right:-30%;top:6%;width:120%;height:46px;transform:rotate(-24deg);transform-origin:left center;
  background:var(--prism);filter:blur(14px);opacity:.55;border-radius:999px;pointer-events:none}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* buttons: the game's PLAY pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.92);padding:18px 40px;border-radius:999px;
  border:2px solid rgba(91,79,214,.55);box-shadow:0 0 0 6px rgba(91,79,214,.08),0 16px 30px -14px rgba(60,52,140,.45);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--violet);box-shadow:0 0 0 8px rgba(91,79,214,.12),0 22px 36px -14px rgba(60,52,140,.5)}
.btn:active{transform:translateY(0)}
.btn small{display:block;font-size:10px;letter-spacing:.24em;color:var(--violet);margin-top:4px}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--violet);padding:18px 20px}
.btn-ghost:hover{background:rgba(255,255,255,.6);box-shadow:none;border-color:transparent}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* glass surfaces */
.glass{background:var(--glass);border:1px solid var(--line-hi);border-radius:var(--rad);box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.prism-rule{height:3px;border:none;border-radius:3px;background:var(--prism);max-width:120px;margin:22px auto}

/* sections */
.sec{padding:40px 0}
.sec-head{text-align:center;margin-bottom:28px}
.sec-head .title{font-size:clamp(24px,3.6vw,32px);margin-top:10px}
.sec-head p{color:var(--ink-lt);font-size:15px;margin-top:8px}

/* page header (inner pages) */
.ph{text-align:center;padding:56px 0 20px;animation:fu .7s ease both}
.ph .title{font-size:clamp(30px,5vw,48px);margin:12px 0 12px}
.ph p{color:var(--ink-md);font-size:17px;max-width:520px;margin:0 auto}

/* game cards */
.gg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gc{display:block;text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:fu .6s ease both}
.gc:nth-child(2){animation-delay:.08s}.gc:nth-child(3){animation-delay:.16s}.gc:nth-child(4){animation-delay:.24s}
a.gc:hover{transform:translateY(-6px);box-shadow:var(--shH)}
.gt{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;margin:10px 10px 0;border-radius:18px}
.gt img{width:100%;height:100%;object-fit:cover}
.gt svg{width:52%;height:52%;filter:drop-shadow(0 10px 14px rgba(60,52,140,.18))}
.gt.t1{background:linear-gradient(160deg,#e9f3ff,#d6e4ff)}
.gt.t2{background:linear-gradient(160deg,#f4ecff,#e2d6ff)}
.gt.t3{background:linear-gradient(160deg,#ebfff6,#d3f4e6)}
.gi{padding:16px 18px 20px}
.gi h3{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:.02em;margin-bottom:2px}
.gi p{font-size:13.5px;color:var(--ink-lt)}
.tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--head);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.live{color:#1f8f5f;background:#ddf7ea}
.tag.soon{color:var(--violet);background:var(--violet-lt)}

/* about strip / content cards */
.strip{display:flex;gap:28px;align-items:center;padding:32px 36px}
.strip h2{font-family:var(--head);font-weight:600;font-size:20px;margin-bottom:6px}
.strip p{color:var(--ink-md);font-size:15.5px}
.icon-orb{width:84px;height:84px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,#e4e0ff 70%);box-shadow:inset 0 0 0 1px #fff,0 12px 24px -10px rgba(60,52,140,.35)}
.icon-orb svg{width:46px;height:46px}
.cc{padding:40px 44px;margin:12px 0 48px;animation:fu .7s ease .1s both}
.cc h2{font-family:var(--head);font-weight:600;font-size:19px;color:var(--ink);margin:28px 0 8px}
.cc h2:first-child{margin-top:0}
.cc p,.cc li{font-size:15.5px;color:var(--ink-md);line-height:1.75}

/* games page detail card */
.ad{display:flex;gap:32px;align-items:flex-start;padding:32px;margin-bottom:24px;animation:fu .7s ease .1s both}
.ad-icon{width:128px;height:128px;border-radius:28px;flex-shrink:0;overflow:hidden;box-shadow:0 0 0 1px #fff,0 18px 30px -14px rgba(60,52,140,.45)}
.ad-icon img{width:100%;height:100%;object-fit:cover}
.ad-info h3{font-family:var(--head);font-weight:600;font-size:26px;letter-spacing:.02em}
.ad-info .genre{margin:6px 0 12px}
.ad-info p{font-size:15.5px;color:var(--ink-md);margin-bottom:12px;max-width:560px}
.pl{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--violet);text-decoration:none}
.pl:hover{text-decoration:underline}
.soon-box{text-align:center;padding:40px 24px}
.soon-box .title{font-size:clamp(20px,3vw,26px);margin:10px 0 6px}
.soon-box p:not(.title){color:var(--ink-lt)}

/* contact */
.ctc{text-align:center;padding:48px 32px}
.ctc .icon-orb{margin:0 auto 20px}
.ctc .bn{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:.06em;margin-bottom:18px}
.email-img{display:inline-block;padding:14px 30px;background:#fff;border-radius:999px;border:2px solid rgba(91,79,214,.35);box-shadow:0 0 0 6px rgba(91,79,214,.07)}
.email-img img{display:block}
.ctc .nt{font-size:14.5px;color:var(--ink-lt);max-width:440px;margin:0 auto}

/* footer */
footer{margin-top:32px;padding:28px 0 36px;border-top:1px solid var(--line)}
.ft{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.fl .mark{width:32px;height:32px}
.fl .wm{font-size:13px}
.flinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.flinks a{font-size:13.5px;font-weight:500;color:var(--ink-md);text-decoration:none;transition:color .2s}
.flinks a:hover{color:var(--violet)}
.fb{font-size:12.5px;color:var(--ink-lt)}

@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:28px}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero .actions{justify-content:center}
  .hero-art{max-width:300px;grid-row:1}
  .gg{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:640px){
  .w{padding:0 16px}
  nav{border-radius:22px;justify-content:center}
  nav ul a{padding:8px 10px;font-size:12px;letter-spacing:.1em}
  .sp-logo .wm{font-size:13px}
  .strip,.ad{flex-direction:column;align-items:center;text-align:center;padding:26px 20px}
  .cc{padding:28px 22px}
  .ctc{padding:36px 20px}
  .btn{padding:16px 30px;letter-spacing:.22em}
  .ft{flex-direction:column;align-items:flex-start}
  .gi{padding:12px 12px 16px}.gi h3{font-size:15px}
}