:root{
  --purple:#2b075a;
  --purple-2:#44117a;
  --cream:#fff1cf;
  --paper:#fff8e7;
  --pink:#f51f73;
  --orange:#ff6b18;
  --cyan:#08bfd3;
  --gold:#ffc43d;
  --ink:#24103f;
  --white:#fffdf7;
  --shadow:0 16px 34px rgba(21,4,48,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--purple);
  font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
  line-height:1.5;
}
body.light-page{background:var(--cream)}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1380px,calc(100% - 48px));margin:auto}
.site-header{position:relative;z-index:20;padding:20px 0}
.site-header.over{position:absolute;inset:0 0 auto}
.paper-nav{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 30px;
  color:var(--ink);
  background:var(--cream);
  border:2px solid rgba(255,255,255,.7);
  border-radius:999px;
  box-shadow:0 9px 0 rgba(22,4,49,.35),0 18px 30px rgba(20,3,46,.2);
}
.brand-lockup{display:flex;align-items:flex-end;gap:13px;flex:0 0 auto}
.brand{
  flex:0 0 auto;
  color:var(--purple);
  font-family:"Cooper Black","Arial Rounded MT Bold",Georgia,serif;
  font-size:clamp(2rem,4vw,3.35rem);
  font-weight:900;
  line-height:.85;
  letter-spacing:-.05em;
  text-decoration:none;
}
.brand i{color:var(--pink);font-style:normal}
.site-date{
  margin-bottom:1px;
  color:#684c6f;
  font-size:.83rem;
  font-weight:900;
  white-space:nowrap;
}
.navlinks{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.navlinks a{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  font-size:1.04rem;
  font-weight:900;
  text-decoration:none;
}
.navlinks a:hover,.navlinks a:focus-visible,.navlinks a.active{
  color:var(--purple);
  background:var(--gold);
  outline:none;
}
.navlinks a.active::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:4px;
  left:18px;
  height:4px;
  border-radius:4px;
  background:var(--pink);
}
.hero{
  min-height:760px;
  display:flex;
  align-items:center;
  padding:150px 0 70px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  overflow:hidden;
}
.hero-copy{width:min(600px,46%);position:relative;z-index:2}
.hero.dark .hero-copy{color:var(--cream)}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:19px;
  color:var(--cyan);
  font-size:clamp(.95rem,1.4vw,1.2rem);
  font-weight:900;
}
.kicker::before{content:"✦";color:var(--pink);font-size:1.25em}
.hero h1{
  margin:0 0 20px;
  font-family:"Cooper Black","Arial Rounded MT Bold",Georgia,serif;
  font-size:clamp(2.25rem,4.5vw,4.25rem);
  line-height:1.04;
  letter-spacing:-.04em;
}
.hero h1 .pink{color:var(--pink)}
.hero h1 .cyan{color:var(--cyan)}
.hero h1 .orange{color:var(--orange)}
.hero .lead{margin:0 0 28px;font-size:clamp(1.02rem,1.7vw,1.25rem)}
.buttons{display:flex;flex-wrap:wrap;gap:14px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 22px;
  border:2px solid rgba(255,255,255,.22);
  border-radius:16px;
  color:var(--ink);
  background:var(--cyan);
  box-shadow:0 7px 0 #0b3353,0 12px 22px rgba(0,0,0,.25);
  font-weight:900;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.button.orange{background:var(--orange)}
.button.pink{color:var(--white);background:var(--pink)}
.button.gold{background:var(--gold)}
.button.cream{background:var(--cream)}
.button:hover{transform:translateY(-3px);box-shadow:0 10px 0 #0b3353,0 16px 25px rgba(0,0,0,.24)}
.paper-section{
  position:relative;
  padding:78px 0;
  color:var(--ink);
  background:var(--cream);
  border-radius:52px 52px 0 0;
}
.paper-section.white{background:var(--paper)}
.section-head{text-align:center;margin:0 auto 38px;max-width:800px}
.section-head h2{
  margin:0 0 10px;
  font-family:"Cooper Black","Arial Rounded MT Bold",Georgia,serif;
  font-size:clamp(1.8rem,3vw,2.8rem);
  line-height:1.08;
}
.section-head p{margin:0;font-size:1.05rem}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-grid.three{grid-template-columns:repeat(3,1fr)}
.feature-card{
  position:relative;
  overflow:hidden;
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:27px;
  border:5px solid var(--cream);
  border-radius:30px;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .22s;
}
.feature-card:hover{transform:translateY(-7px) rotate(-.5deg)}
.feature-card:nth-child(even):hover{transform:translateY(-7px) rotate(.5deg)}
.feature-card.pink{color:var(--white);background:linear-gradient(145deg,#fa267b,#a4136c)}
.feature-card.bible{color:var(--cream);background:linear-gradient(145deg,#4c157e,#173c77)}
.feature-card.cyan{background:linear-gradient(145deg,#11d2db,#0879a6)}
.feature-card.orange{background:linear-gradient(145deg,#ff8a21,#e93254)}
.feature-card::after{
  content:"";
  position:absolute;
  right:-45px;
  bottom:-55px;
  width:180px;
  height:180px;
  border:24px solid rgba(255,255,255,.17);
  border-radius:50%;
}
.card-icon{position:relative;z-index:1;font-size:3.6rem;filter:drop-shadow(0 7px 3px rgba(0,0,0,.2))}
.feature-card h3{position:relative;z-index:1;margin:18px 0 7px;font-family:"Cooper Black",Georgia,serif;font-size:1.65rem;line-height:1.05}
.feature-card p{position:relative;z-index:1;margin:0;font-weight:700}
.card-go{position:relative;z-index:1;margin-top:22px;font-weight:900}
.shop-band{
  display:grid;
  grid-template-columns:150px 1fr auto;
  align-items:center;
  gap:28px;
  margin-top:54px;
  padding:24px 30px;
  color:var(--cream);
  background:linear-gradient(115deg,var(--purple),var(--pink),var(--orange));
  border:5px solid var(--cream);
  border-radius:30px;
  box-shadow:var(--shadow);
}
.shop-band img{width:150px;aspect-ratio:1;object-fit:cover;border-radius:22px}
.shop-band h2{margin:0 0 7px;font-family:"Cooper Black",Georgia,serif;font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.08}
.shop-band p{margin:0}
.shop-band.featured-shop{margin:0 0 40px}
.shop-actions{display:flex;flex-direction:column;gap:13px}
.shop-actions .button{white-space:nowrap}
.wipeout-mini{
  max-width:750px;
  margin:38px auto 0;
  padding:14px 20px;
  border:2px dashed #d0ad72;
  border-radius:18px;
  color:#614c60;
  background:#fff9e9;
  font-size:.93rem;
  text-align:center;
}
.wipeout-mini a{color:var(--purple);font-weight:900}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.video-card{
  overflow:hidden;
  color:var(--ink);
  background:var(--cream);
  border:5px solid var(--cream);
  border-radius:26px;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .2s;
}
.video-card:hover{transform:translateY(-6px)}
.video-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.video-copy{padding:20px}
.video-copy h3{margin:0 0 6px;font-family:"Cooper Black",Georgia,serif;font-size:1.35rem}
.video-copy p{margin:0}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.game-card{
  min-height:260px;
  padding:30px;
  border:6px solid var(--cream);
  border-radius:30px;
  box-shadow:var(--shadow);
  text-decoration:none;
}
.game-card:first-child{background:linear-gradient(145deg,var(--orange),var(--pink))}
.game-card:last-child{background:linear-gradient(145deg,var(--cyan),#126da6)}
.game-card .card-icon{font-size:4rem}
.game-card h2{margin:22px 0 8px;font-family:"Cooper Black",Georgia,serif;font-size:2rem}
.game-card p{margin:0 0 22px;font-weight:700}
.magic-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.magic-point{padding:25px;border:4px solid var(--cream);border-radius:24px;background:var(--paper);box-shadow:var(--shadow);text-align:center}
.magic-point span{font-size:2.5rem}
.magic-point h3{margin:12px 0 5px;font-family:"Cooper Black",Georgia,serif}
.magic-point p{margin:0}
.video-shell{padding:10px;border:5px solid var(--cream);border-radius:28px;background:var(--purple);box-shadow:var(--shadow)}
.video-shell video{display:block;width:100%;max-height:72vh;aspect-ratio:16/9;border-radius:18px;background:#080312;object-fit:contain}
.site-footer{padding:38px 20px;color:#d8c6e6;background:#1a0436;text-align:center}
.site-footer a{color:var(--gold);font-weight:900}
@media(max-width:1000px){
  .paper-nav{border-radius:28px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid.three{grid-template-columns:repeat(3,1fr)}
  .shop-band{grid-template-columns:115px 1fr}
  .shop-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .wrap{width:min(100% - 24px,1380px)}
  .site-header{padding:10px 0}
  .paper-nav{display:block;padding:15px 16px;text-align:center}
  .brand-lockup{display:flex;justify-content:center;align-items:flex-end;margin-bottom:11px}
  .brand{display:inline-block;font-size:2.25rem}
  .site-date{font-size:.75rem}
  .navlinks{justify-content:center;gap:3px}
  .navlinks a{padding:7px 9px;font-size:.86rem}
  .hero{min-height:760px;padding:145px 0 50px;background-position:63% center}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,7,90,.92) 0%,rgba(43,7,90,.76) 54%,rgba(43,7,90,.32) 100%)}
  .hero{position:relative}
  .hero.light::before{background:linear-gradient(180deg,rgba(255,241,207,.96),rgba(255,241,207,.82) 58%,rgba(255,241,207,.38))}
  .hero-copy{width:100%;max-width:520px}
  .hero h1{font-size:clamp(2rem,10vw,2.75rem)}
  .buttons{display:grid}
  .button{width:100%}
  .paper-section{padding:58px 0;border-radius:32px 32px 0 0}
  .feature-grid,.feature-grid.three,.video-grid,.game-grid,.magic-points{grid-template-columns:1fr}
  .feature-card{min-height:250px}
  .shop-band{grid-template-columns:1fr;text-align:center;padding:24px 20px}
  .shop-band img{margin:auto}
  .shop-actions{grid-column:auto;display:grid;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}