/* Apex Arcade website. Dark arcade night: layered neon glows, never a flat background. */
:root{--ink:#f2f5ff;--mut:#a9b6d3;--dim:#7383a6;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --card:rgba(18,22,44,.72);--teal:#2dd4bf;--vio:#8b6cff;--pink:#ff5fae;--gold:#fbbf24;--r:22px;
  --safe-b:env(safe-area-inset-bottom)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 12% -8%,rgba(124,58,237,.45),transparent 62%),radial-gradient(1000px 640px at 105% 6%,rgba(13,148,136,.38),transparent 58%),
  radial-gradient(900px 600px at 50% 110%,rgba(236,72,153,.22),transparent 60%),linear-gradient(180deg,#0d0a24 0%,#080617 55%,#06040f 100%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}
a{color:#8ee9ff}h1,h2,h3{line-height:1.12;letter-spacing:-.4px;margin:0}
.sky{position:absolute;top:0;left:0;right:0;height:100%;min-height:100vh;pointer-events:none;z-index:-1;overflow:hidden}
.sky::before{content:"";position:absolute;inset:-50%;background-image:linear-gradient(rgba(139,108,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(139,108,255,.07) 1px,transparent 1px);
  background-size:46px 46px;transform:perspective(600px) rotateX(58deg) translateY(30%);mask-image:linear-gradient(180deg,transparent 35%,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 35%,#000 70%,transparent 100%)}
.sky i{position:absolute;width:42vmax;height:42vmax;border-radius:50%;filter:blur(70px);opacity:.28;animation:drift 22s ease-in-out infinite alternate}
.sky i:nth-child(1){background:#7c3aed;left:-12vmax;top:10vh}.sky i:nth-child(2){background:#0ea5a4;right:-14vmax;top:30vh;animation-delay:-7s}
.sky i:nth-child(3){background:#db2777;left:30vw;bottom:-22vmax;animation-delay:-13s}
@keyframes drift{to{transform:translate(6vmax,-4vmax) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.sky i,.fi,.cab{animation:none!important}}

.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px max(16px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(9,7,24,.86),rgba(9,7,24,.55));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:900;font-size:19px;letter-spacing:.2px;white-space:nowrap}
.brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--vio),var(--teal));box-shadow:0 0 18px rgba(139,108,255,.55);font-size:18px}
.brand.sm{font-size:17px}
.links{display:flex;gap:4px;margin-left:8px}.links a{color:#d6dffb;text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:999px}
.links a:hover{background:rgba(255,255,255,.07)}
.acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.nb{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap}
.nb.pri{background:linear-gradient(135deg,var(--teal),#22c4b0);color:#03201c;box-shadow:0 6px 20px rgba(45,212,191,.35)}
.nb.ghost{color:#fff;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
@media (max-width:760px){.links{display:none}.nb.ghost{padding:8px 12px}.brand span:last-child{font-size:17px}}
@media (max-width:360px){.nb.ghost{display:none}}

main{max-width:1120px;margin:0 auto;padding:0 18px 40px}
.kicker{display:inline-block;font-size:12px;font-weight:900;letter-spacing:1.6px;color:#c9bcff;background:rgba(139,108,255,.14);border:1px solid rgba(139,108,255,.4);padding:6px 12px;border-radius:999px}
.lede{font-size:20px;color:var(--mut);margin:14px 0 0;max-width:640px}.lede.sm{font-size:17px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:16px;border:1px solid var(--line2);
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s}
.btn:active{transform:scale(.98)}.btn.big{min-height:56px;font-size:18px;padding:14px 26px}
.btn.pri{background:linear-gradient(135deg,#34e3cd,#14b8a6 45%,#8b6cff);border:0;color:#04121f;box-shadow:0 10px 30px rgba(45,212,191,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{background:rgba(255,255,255,.05)}.btn.red{border-color:rgba(255,95,120,.5);color:#ffc0cb;background:rgba(255,95,120,.10)}
.btn[disabled]{opacity:.6}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card.soft{margin-top:22px;background:rgba(45,212,191,.07);border-color:rgba(45,212,191,.3)}
.glow{box-shadow:0 0 0 1px rgba(139,108,255,.25),0 20px 60px rgba(76,29,149,.35)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:56px 0 30px;min-height:calc(100vh - 140px)}
.hero h1{font-size:clamp(38px,6.4vw,68px);margin-top:16px;background:linear-gradient(180deg,#fff 30%,#c7d2fe);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(139,108,255,.25)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.chips span{font-size:14px;font-weight:700;color:#dfe6ff;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.hart{position:relative;height:min(520px,70vw);min-height:340px}
.cab{position:absolute;left:50%;top:50%;width:min(230px,46vw);aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:28px 28px 18px 18px;
  background:linear-gradient(160deg,#2a1d63,#14103a 60%,#0e0b28);border:2px solid rgba(139,108,255,.6);box-shadow:0 0 50px rgba(139,108,255,.45),inset 0 0 30px rgba(45,212,191,.15);animation:bob 6s ease-in-out infinite}
.cab .scr{position:absolute;left:12%;right:12%;top:12%;height:44%;border-radius:12px;background:radial-gradient(circle at 50% 40%,#2dd4bf55,#0b1530 70%);border:2px solid #2dd4bf88;display:grid;place-items:center;box-shadow:0 0 24px #2dd4bf55 inset}
.cab .scr span{font:900 clamp(12px,2.6vw,18px)/1 ui-monospace,Menlo,monospace;letter-spacing:2px;color:#a7fff3;text-shadow:0 0 12px #2dd4bf;animation:blink 1.6s steps(2) infinite}
.cab .pad{position:absolute;left:14%;right:14%;bottom:12%;height:22%;border-radius:12px;background:linear-gradient(180deg,#1f1850,#151038);border:1px solid #ffffff22}
.cab .pad i{position:absolute;left:18%;top:28%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9ad0,#e11d74);box-shadow:0 0 14px #ff5fae}
.cab .pad b{position:absolute;top:34%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#f59e0b);box-shadow:0 0 10px #fbbf24}
.cab .pad b:nth-of-type(1){right:30%}.cab .pad b:nth-of-type(2){right:12%;background:radial-gradient(circle at 35% 30%,#b8fff4,#14b8a6);box-shadow:0 0 10px #2dd4bf}
@keyframes bob{50%{transform:translate(-50%,-53%)}}@keyframes blink{50%{opacity:.35}}
.fi{position:absolute;width:clamp(56px,9vw,84px);aspect-ratio:1;border-radius:22px;padding:6px;background:rgba(255,255,255,.07);border:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:float 9s ease-in-out infinite}
.fic{width:100%;height:100%;border-radius:16px;display:block;object-fit:cover}
.fi.f0{left:2%;top:6%}.fi.f1{left:38%;top:0;animation-delay:-2s}.fi.f2{right:2%;top:8%;animation-delay:-4s}.fi.f3{left:0;top:40%;animation-delay:-1s}
.fi.f4{right:0;top:42%;animation-delay:-5s}.fi.f5{left:8%;bottom:6%;animation-delay:-3s}.fi.f6{right:10%;bottom:4%;animation-delay:-6s}.fi.f7{left:40%;bottom:0;animation-delay:-7s}
.fi.f8{left:22%;top:22%;transform:scale(.8);animation-delay:-2.5s;opacity:.85}.fi.f9{right:22%;top:24%;animation-delay:-4.5s;opacity:.85}.fi.f10{left:20%;bottom:24%;opacity:.8;animation-delay:-8s}.fi.f11{right:22%;bottom:26%;opacity:.8;animation-delay:-1.5s}
@keyframes float{50%{transform:translateY(-14px) rotate(3deg)}}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:34px;min-height:0}.hart{order:-1;height:300px;min-height:0;margin:0 -6px}.fi.f8,.fi.f9,.fi.f10,.fi.f11{display:none}}

/* sections */
.sec{padding:40px 0}.sec.center{text-align:center}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}.sh h2{font-size:clamp(26px,4vw,36px)}.sh a{font-weight:800;text-decoration:none;white-space:nowrap}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:900px){.strip{grid-template-columns:repeat(4,1fr)}}@media (max-width:520px){.strip{grid-template-columns:repeat(3,1fr);gap:10px}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:20px;background:var(--card);border:1px solid var(--line);
  color:#fff;text-decoration:none;font-weight:700;font-size:13px;text-align:center;line-height:1.25;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);border-color:rgba(139,108,255,.6)}
.gi{width:68px;height:68px;border-radius:18px;object-fit:cover;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.gi.emo{display:grid;place-items:center;font-size:38px;background:linear-gradient(135deg,#3b2a8a,#14304a)}
.fic.emo{display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,#3b2a8a,#14304a)}
em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.8px;color:#2a1300;background:linear-gradient(135deg,#fbbf24,#ff7a59);padding:3px 7px;border-radius:7px;vertical-align:middle}
.tile em{position:absolute;top:8px;right:8px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media (max-width:860px){.feats{grid-template-columns:1fr 1fr}}@media (max-width:560px){.feats{grid-template-columns:1fr}}
.feat .fe{font-size:34px}.feat h3{font-size:20px;margin:10px 0 6px}.feat p{margin:0;color:var(--mut);font-size:16px}
.split{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start}@media (max-width:860px){.split{grid-template-columns:1fr}}
.split h2{font-size:clamp(26px,4vw,36px)}
.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 0}.steps li{counter-increment:s;position:relative;padding:4px 0 18px 56px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,var(--vio),var(--teal));color:#fff}.steps b{display:block;font-size:18px}.steps span{color:var(--mut)}
.price{position:relative;overflow:hidden}.price::before{content:"";position:absolute;inset:-40% -40% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(#8b6cff66,transparent 70%)}
.ptag{display:inline-block;font-size:13px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:#c9bcff}
.amt{display:flex;align-items:baseline;gap:6px;margin:6px 0 12px}.amt b{font-size:56px;letter-spacing:-1.5px}.amt span{color:var(--mut);font-weight:700}
.ticks{list-style:none;padding:0;margin:0 0 20px}.ticks li{position:relative;padding:6px 0 6px 30px;color:#e3e9ff}
.ticks li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:rgba(45,212,191,.2);color:var(--teal);font-weight:900;font-size:13px;display:grid;place-items:center}
.price .btn{width:100%}.fine{font-size:13px;color:var(--dim);margin:12px 0 0;text-align:center}
.faq{display:grid;gap:10px;max-width:820px}.qa{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 18px}
.qa summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none}.qa summary::-webkit-details-marker{display:none}.qa summary::after{content:"+";float:right;color:var(--teal);font-size:22px;line-height:1}
.qa[open] summary::after{content:"–"}.qa p{margin:0 0 16px;color:var(--mut)}

/* inner pages */
.phead{padding:44px 0 6px}.phead h1{font-size:clamp(34px,5.4vw,54px);margin-top:14px}
.glist{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:760px){.glist{grid-template-columns:1fr}}
.gcard{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;padding:14px;scroll-margin-top:90px}
.gcard h3{font-size:18px}.gcard p{margin:4px 0 0;color:var(--mut);font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard>div{flex:1;min-width:0}.play{flex:none;font-weight:900;font-size:14px;padding:8px 14px;border-radius:999px;background:rgba(45,212,191,.16);color:var(--teal);border:1px solid rgba(45,212,191,.4)}
.gcard:target{border-color:var(--teal);box-shadow:0 0 0 2px rgba(45,212,191,.35)}
.doc{max-width:820px;margin:26px auto 0}.split .doc{margin:0}.doc h1{font-size:clamp(30px,4.6vw,42px);margin-bottom:12px}.doc h2{font-size:22px;margin:26px 0 8px}
.doc p,.doc li{color:#d5ddf3}.doc ul{padding-left:22px}
.auth{max-width:460px;margin:44px auto 0}.auth h1{font-size:32px}.auth.center{text-align:center}.big-emo{font-size:64px}
.form{display:grid;gap:14px;margin-top:22px}.form label{display:grid;gap:6px;font-weight:800;font-size:14px;color:#cfd8f2}
.form input{min-height:52px;border-radius:14px;border:1px solid var(--line2);background:rgba(5,6,20,.6);color:#fff;font-size:17px;padding:12px 14px;outline:none}
.form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,.2)}
.err{color:#ffb4c0;font-weight:700;margin:0}.alt{text-align:center;color:var(--mut);margin-top:18px;font-size:15px}
.acct{display:grid;gap:14px;padding-top:20px}.acct h2{font-size:22px;margin-bottom:6px}
.code{font:900 34px/1.1 ui-monospace,Menlo,monospace;letter-spacing:6px;color:#a7fff3;text-shadow:0 0 18px rgba(45,212,191,.5);margin:8px 0}
.devs{display:grid;gap:8px;margin-top:12px}.dev{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.dev span{flex:1;color:var(--mut);font-size:15px}.pill{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.6px;padding:4px 10px;border-radius:999px}
.pill.on{background:rgba(52,211,153,.16);color:#6ee7b7;border:1px solid rgba(52,211,153,.4)}.pill.off{background:rgba(251,191,36,.12);color:#fde68a;border:1px solid rgba(251,191,36,.4)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.foot{max-width:1120px;margin:0 auto;padding:30px 18px calc(30px + var(--safe-b));border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;color:var(--mut)}
.foot p{margin:8px 0 0;font-size:15px}.fc{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}.fc a{color:#cfd8f2;text-decoration:none;font-weight:700;font-size:15px}
.copy{grid-column:1/-1;font-size:13px!important;color:var(--dim)}.copy a{color:var(--dim)}
@media (max-width:700px){.foot{grid-template-columns:1fr}}
body.appstart .top,body.appstart .foot{display:none}

/* ---- Themes (owner 2026-10-07: "make everything blend into each other and give me theme options ... every holiday and any color").
   Colors come from /theme.css (Admin → Themes); the values after the commas are only used if it can't load. */
:root{--mut:#eef1ff;--dim:#dfe4ff;--line:rgba(255,255,255,.30);--line2:rgba(255,255,255,.45);--card:rgba(255,255,255,.15)}
body{background:var(--t-bg,linear-gradient(160deg,#4b23c8,#a02fb4 52%,#d4396e));background-color:var(--t-base,#7a2ab8);background-attachment:fixed}
.sky::before{background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px)}
.sky i{opacity:.32}.sky i:nth-child(1){background:var(--t-c1,#3ff0dc)}.sky i:nth-child(2){background:var(--t-c2,#ffd65a)}.sky i:nth-child(3){background:var(--t-c3,#ff7ad9)}
.top{background:var(--t-head,rgba(75,35,200,.85));border-bottom:1px solid rgba(255,255,255,.28)}
.links a{color:#fff}.links a:hover{background:rgba(255,255,255,.16)}
.nb.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.nb.pri,.btn.pri{background:var(--t-btn,linear-gradient(135deg,#fff36b,#ff9a4a));color:var(--t-btn-ink,#2a0f3a);border:0;box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.6)}
.btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.btn.red{color:#fff;background:rgba(255,80,110,.35);border-color:rgba(255,190,200,.7)}
.card{box-shadow:0 12px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.glow{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 20px 60px rgba(0,0,0,.25)}
.kicker{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.hero h1{background:none;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.3)}
.chips span{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.cab{background:linear-gradient(160deg,var(--t-b1,#4b23c8),var(--t-b2,#a02fb4) 60%,var(--t-b3,#d4396e));border:3px solid rgba(255,255,255,.75);box-shadow:0 0 60px rgba(255,255,255,.35)}
.cab .scr{background:radial-gradient(circle at 50% 40%,var(--t-c1,#5ff5e0),var(--t-b1,#1d7fb0) 80%);border-color:#fff}.cab .scr span{color:#fff;text-shadow:0 0 12px var(--t-c1,#3ff0dc)}
.cab .pad{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.fi{background:#fff;border:0;padding:4px;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 12px 30px rgba(0,0,0,.3),0 0 26px rgba(255,255,255,.45)}
.fi.f8,.fi.f9,.fi.f10,.fi.f11{opacity:1}
.fic{border-radius:18px}
.gi{box-shadow:0 0 0 3px #fff,0 8px 22px rgba(0,0,0,.3)}
.gi.emo,.fic.emo{background:var(--t-btn,linear-gradient(135deg,#ffe36b,#ff8fd0))}
.tile:hover{border-color:#fff}
.steps li::before{background:var(--t-btn,linear-gradient(135deg,#ffd65a,#ff8fd0));color:var(--t-btn-ink,#2a0f3a)}
.ptag{color:#fff}.ticks li{color:#fff}.ticks li::before{background:#fff;color:var(--t-base,#4c2fd6)}
.price::before{background:radial-gradient(var(--t-c2,#ffd65a),transparent 70%);opacity:.5}
.play{background:#fff;color:var(--t-base,#4126c4);border-color:#fff}
.gcard:target{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.doc p,.doc li{color:#fff}
.form label{color:#fff}
.form input{background:#fff;color:#1d1446;border-color:rgba(255,255,255,.8)}
.form input::placeholder{color:#8b86b0}
.form input:focus{border-color:var(--t-c2,#ffd65a);box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.err{color:#fff;background:rgba(220,30,80,.6);padding:8px 12px;border-radius:12px}
.code{color:#fff;text-shadow:0 0 18px rgba(255,255,255,.6)}
.dev{background:rgba(255,255,255,.14)}
.pill.on{background:#d9fbe8;color:#06603a;border-color:#fff}.pill.off{background:#fff3c4;color:#7a4b00;border-color:#fff}
.fc a{color:#fff}.foot{border-top-color:rgba(255,255,255,.3)}
a{color:var(--t-link,#fff7a8)}

/* iPhone Safari 26 (owner 2026-10-07: "make sure these empty purple spaces are not there"): Safari fills its top and bottom bars with
   solid color when a page has a background or layer pinned to the screen. Nothing is pinned now, so games scroll under Safari's glass bars. */
html,body{background-attachment:scroll!important}
body{position:relative;min-height:100vh}