.arcade-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 4%, rgba(80, 224, 255, .18), transparent 25%),
    radial-gradient(circle at 8% 63%, rgba(255, 52, 143, .14), transparent 31%),
    linear-gradient(145deg, #020407 0%, #07070d 52%, #020305 100%);
  font-family: "Space Grotesk", sans-serif;
}
.arcade-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
}
.arcade-back { color: #b9c2c7; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.arcade-back:hover, .arcade-back:focus-visible { color: #fff; }
.arcade-main { padding: 135px 4vw 70px; }
.arcade-hero { display: grid; grid-template-columns: .8fr 2fr .8fr; align-items: end; gap: 4vw; max-width: 1500px; margin: 0 auto 50px; }
.arcade-hero h1 {
  font-family: Syne, sans-serif;
  font-size: clamp(4.5rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -.075em;
  background: linear-gradient(105deg,#fff 12%,#6ae9ff 43%,#ff5eac 70%,#ffe06f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(77,225,255,.12));
}
.arcade-title-logo { display: inline-block; width: .78em; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #040507 url("assets/w4-logo.jpeg") 50% 54% / 139% 139% no-repeat; box-shadow: 0 0 38px rgba(77,225,255,.23); vertical-align: -.08em; }
.arcade-title-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.arcade-hero > p:last-child { margin: 0 0 14px; color: #9fa9ae; font-size: 1rem; }
.arcade-grid { max-width: 1500px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 0 auto; }
.arcade-card {
  --accent: #4de1ff;
  position: relative;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 46%, rgba(255,255,255,.035));
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 26px 75px rgba(0,0,0,.4), 0 0 45px color-mix(in srgb, var(--accent) 9%, transparent);
  backdrop-filter: blur(16px);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.arcade-card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: -155px;
  right: -120px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(70px);
  opacity: .17;
}
.arcade-card-run { --accent: #4de1ff; }
.arcade-card-hustle { --accent: #ff3f81; }
.arcade-card-clash { --accent: #ffd44a; }
.arcade-card:hover, .arcade-card:focus-visible { z-index: 2; transform: translateY(-12px) scale(1.012); border-color: color-mix(in srgb, var(--accent) 74%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 34px 90px rgba(0,0,0,.55), 0 0 55px color-mix(in srgb, var(--accent) 18%, transparent); }
.arcade-number { color: color-mix(in srgb, var(--accent) 80%, white); font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.arcade-name { margin-top: auto; font: 700 clamp(2rem, 3.4vw, 3.65rem)/.94 Syne, sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.arcade-copy { margin-top: 16px; color: #9aa4a9; line-height: 1.5; }
.arcade-arrow { position: absolute; top: 23px; right: 27px; display: grid; width: 38px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.05); color: #fff; font-size: 1.15rem; transition: transform .3s ease, background .3s ease; }
.arcade-card:hover .arcade-arrow { transform: rotate(45deg); background: var(--accent); color: #040405; }
.arcade-art { position: relative; height: 270px; display: block; margin: 35px 0 28px; }

.arcade-featured {
  --accent: #ffd44a;
  grid-column: 1 / -1;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(330px,.78fr) minmax(0,1.45fr);
  align-items: stretch;
  padding: 0;
  border-color: rgba(255,212,74,.48);
  background: linear-gradient(120deg,rgba(6,8,13,.98) 0 38%,rgba(10,8,9,.72) 62%,rgba(5,5,7,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.18),0 35px 100px rgba(0,0,0,.52),0 0 70px rgba(255,212,74,.12);
}
.arcade-featured::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(77,225,255,.09),transparent 38%,rgba(255,63,129,.08));}
.arcade-featured-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:54px 28px 54px 48px;}
.arcade-featured .arcade-number{margin-top:17px;color:#8d9296;}
.arcade-featured .arcade-name{margin:24px 0 0;font-size:clamp(3.3rem,6vw,6.8rem);line-height:.82;background:linear-gradient(105deg,#fff 8%,#ffd44a 58%,#ff765f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.arcade-featured .arcade-copy{max-width:520px;font-size:1.05rem;}
.arcade-flagship{align-self:flex-start;padding:9px 13px;border:1px solid rgba(77,225,255,.55);border-radius:999px;background:rgba(77,225,255,.09);color:#4de1ff;font:800 .65rem Syne,sans-serif;letter-spacing:.13em;text-transform:uppercase;}
.arcade-play{align-self:flex-start;display:inline-flex;align-items:center;gap:20px;min-height:54px;margin-top:28px;padding:0 23px;border-radius:999px;background:linear-gradient(105deg,#ffd44a,#ff765f);color:#050505;font:800 .72rem Syne,sans-serif;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 35px rgba(255,212,74,.2);}
.arcade-play b{font-size:1.15rem;transition:transform .25s ease;}
.arcade-featured:hover .arcade-play b{transform:translateX(5px);}
.arcade-featured-art{position:relative;z-index:1;min-height:610px;overflow:hidden;}
.arcade-featured-art::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#07090e 0,transparent 23%),linear-gradient(0deg,rgba(2,3,5,.78),transparent 42%);}
.arcade-featured-art img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.08) contrast(1.04);transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.arcade-featured:hover .arcade-featured-art img{transform:scale(1.035);}
.arcade-featured-art i{position:absolute;z-index:3;right:28px;bottom:24px;display:grid;width:100px;aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(3,4,8,.76);color:#fff;font:800 .72rem/1.05 Syne,sans-serif;font-style:normal;letter-spacing:.08em;text-align:center;text-transform:uppercase;box-shadow:0 0 35px rgba(77,225,255,.24);backdrop-filter:blur(8px);}

.arcade-run { isolation: isolate; }
.arcade-run::before, .arcade-run::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(77,225,255,.28); border-radius: 50%; transform: translate(-50%,-50%) rotateX(66deg); }
.arcade-run::before { width: 105%; height: 76%; box-shadow: 0 0 30px rgba(77,225,255,.12); }
.arcade-run::after { width: 78%; height: 54%; border-color: rgba(255,63,129,.32); }
.run-orbit { position: absolute; z-index: 3; left: 50%; top: 47%; width: 106px; height: 106px; border-radius: 50%; transform: translate(-50%,-50%); background: #030407 url("assets/w4-logo.jpeg") 50% 54% / 139% 139% no-repeat; box-shadow: 0 0 0 8px rgba(3,4,7,.75), 0 0 0 10px rgba(77,225,255,.4), 0 0 55px rgba(77,225,255,.5); }
.run-orbit b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.run-trail { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 22%; height: 54px; border-bottom: 4px solid #4de1ff; border-radius: 0 0 50% 50%; filter: drop-shadow(0 0 9px #4de1ff); transform: skewX(-18deg); }
.run-trail::after { content: ""; position: absolute; right: 9%; bottom: -5px; width: 34%; height: 5px; border-radius: 99px; background: linear-gradient(90deg,#4de1ff,#ff3f81); box-shadow: 0 0 18px #ff3f81; }
.run-pulse { position: absolute; left: 50%; top: 47%; width: 165px; height: 165px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; transform: translate(-50%,-50%); animation: arcade-pulse 2.8s ease-in-out infinite; }

.arcade-hustle{perspective:900px}.hustle-phone{position:absolute;left:50%;top:49%;width:155px;height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.4);border-radius:30px;background:linear-gradient(155deg,#151722,#08090d);box-shadow:0 28px 55px rgba(0,0,0,.55),0 0 38px rgba(255,63,129,.27);transform:translate(-50%,-50%) rotate(-7deg)}.hustle-phone::before{content:"";position:absolute;top:9px;width:38px;height:5px;border-radius:99px;background:#4a4d56}.hustle-phone b{display:grid;width:73px;aspect-ratio:1;place-items:center;border-radius:50%;background:#050505 url("assets/w4-logo.jpeg") 50% 54%/139% 139% no-repeat;color:transparent}.hustle-phone em{margin-top:18px;color:#75f08c;font:800 1.05rem Syne,sans-serif;font-style:normal}.hustle-chart{position:absolute;left:14%;right:10%;bottom:17%;height:58px;border-bottom:4px solid #ff3f81;border-radius:0 0 52% 0;filter:drop-shadow(0 0 8px #ff3f81);transform:rotate(-8deg)}.hustle-chart::after{content:"";position:absolute;right:-3px;bottom:-7px;width:13px;aspect-ratio:1;border-radius:50%;background:#ffd44a;box-shadow:0 0 19px #ffd44a}.hustle-chip{position:absolute;right:7%;top:22%;padding:9px 12px;border:1px solid #75f08c;border-radius:99px;background:#07100b;color:#75f08c;font:800 .58rem Syne,sans-serif;font-style:normal;letter-spacing:.1em;transform:rotate(8deg)}

.arcade-clash{isolation:isolate}.clash-artist{position:absolute;z-index:3;left:26%;top:50%;width:94px;aspect-ratio:1;overflow:hidden;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 9px rgba(3,4,7,.75),0 0 45px #ffd44a;transform:translate(-50%,-50%)}.clash-artist img{width:100%;height:100%;object-fit:cover}.clash-wave{position:absolute;z-index:2;left:28%;top:50%;width:53%;height:60%;border:5px solid #ffd44a;border-left:0;border-radius:0 50% 50% 0;filter:drop-shadow(0 0 10px #ffd44a);transform:translateY(-50%) skewX(-10deg)}.clash-wave::after{content:"";position:absolute;inset:16%;border:2px solid #ff3f81;border-left:0;border-radius:0 50% 50% 0}.clash-target{position:absolute;z-index:1;right:7%;bottom:11%;display:grid;width:100px;height:150px;place-items:center;border:2px solid rgba(255,255,255,.5);border-radius:12px;background:linear-gradient(145deg,#30333a,#8a2544);color:#fff;font:800 .8rem Syne,sans-serif;font-style:normal;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotate(7deg)}

.arcade-stack { display: grid; grid-template-columns: repeat(4, 52px); grid-auto-rows: 52px; justify-content: center; align-content: center; gap: 8px; transform: rotate(-5deg); }
.arcade-stack i { border: 1px solid rgba(255,255,255,.48); border-radius: 16px 5px 16px 5px; background: linear-gradient(145deg, rgba(255,255,255,.75), var(--tile, #4de1ff) 25%, color-mix(in srgb, var(--tile, #4de1ff) 48%, #020308)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 23px color-mix(in srgb, var(--tile, #4de1ff) 35%, transparent); }
.arcade-stack i:nth-child(1) { grid-column: 2; --tile:#4de1ff; }
.arcade-stack i:nth-child(2) { grid-column: 2; --tile:#ff3f81; }
.arcade-stack i:nth-child(3) { grid-column: 3; grid-row: 2; --tile:#8b6dff; }
.arcade-stack i:nth-child(4) { grid-column: 1; grid-row: 3; --tile:#75f08c; }
.arcade-stack i:nth-child(5) { grid-column: 2; grid-row: 3; --tile:#ffd44a; }
.arcade-stack i:nth-child(6) { grid-column: 3; grid-row: 3; --tile:#ff765f; }
.arcade-stack b { position: absolute; left: calc(50% + 67px); top: calc(50% - 57px); width: 56px; height: 56px; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: #050505 url("assets/w4-logo.jpeg") 50% 54% / 139% 139% no-repeat; box-shadow: 0 0 24px rgba(255,212,74,.4); color: transparent; transform: rotate(5deg); }
.arcade-bars{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:7px;padding:28px 0;perspective:700px}.arcade-bars i{display:grid;place-items:center;height:var(--h,46%);border:1px solid rgba(255,255,255,.3);border-radius:13px 13px 5px 5px;background:linear-gradient(180deg,color-mix(in srgb,#ffd44a 65%,white),#ff3f81 48%,#2c164e);color:#08080b;font:800 .72rem Syne,sans-serif;box-shadow:inset 0 1px rgba(255,255,255,.6),0 12px 25px rgba(255,63,129,.22);transform:rotateX(7deg)}.arcade-bars i:nth-child(1){--h:35%}.arcade-bars i:nth-child(2){--h:50%}.arcade-bars i:nth-child(3){--h:65%}.arcade-bars i:nth-child(4){--h:80%}.arcade-bars i:nth-child(5){--h:95%}.arcade-bars b{position:absolute;left:50%;top:50%;display:grid;width:82px;aspect-ratio:1;place-items:center;overflow:hidden;border:3px solid #ffd44a;border-radius:50%;background:#050505 url("assets/w4-logo.jpeg") 50% 54%/139% 139% no-repeat;box-shadow:0 0 0 8px rgba(4,4,8,.78),0 0 35px rgba(255,212,74,.48);color:transparent;transform:translate(-50%,-50%)}
@keyframes arcade-pulse { 50% { transform:translate(-50%,-50%) scale(1.12); opacity:.4; } }

@media (max-width: 900px) {
  .arcade-main { padding: 112px 18px 48px; }
  .arcade-hero { grid-template-columns: 1fr; gap: 9px; margin-bottom: 34px; }
  .arcade-hero h1 { font-size: clamp(4rem, 21vw, 7rem); }
  .arcade-grid { grid-template-columns: 1fr; gap: 18px; }
  .arcade-card { min-height: 475px; border-radius: 27px; }
  .arcade-featured{min-height:0;grid-template-columns:1fr;}
  .arcade-featured-copy{min-height:430px;padding:38px 24px 32px;}
  .arcade-featured .arcade-name{font-size:clamp(3.6rem,16vw,6rem);}
  .arcade-featured-art{min-height:270px;grid-row:1;}
  .arcade-featured-art::before{background:linear-gradient(0deg,#07090e 0,transparent 55%);}
  .arcade-featured-art img{object-position:center;}
  .arcade-featured-art i{width:78px;right:18px;bottom:17px;font-size:.59rem;}
  .arcade-card:hover, .arcade-card:focus-visible { transform: none; }
  .arcade-art { height: 215px; margin: 24px 0; }
}
@media (prefers-reduced-motion: reduce) { .run-pulse { animation: none; } .arcade-card { transition: none; } }