/* The /go hub page. Moved out of the page itself so the site's security policy (which allows no inline styles) can apply to it. */
/* ---------------------------------------------------------------
   ARKADE LOUNGE — hub page
   One QR points here. Every destination below is editable without
   ever reprinting a poster. Edit the LINKS block in the <script>.
----------------------------------------------------------------*/
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --pink:#F10466; --mid:#BE0192; --purple:#6801B8;
  --grad:linear-gradient(90deg,var(--pink),var(--mid),var(--purple));
  --ink:#FFFFFF; --dim:#A9A9B2; --line:#26262C;
}
html{background:#000}
body{
  background:#000; color:var(--ink); min-height:100dvh;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  padding:28px 20px calc(34px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
}
.shell{width:100%;max-width:440px}

/* ---- header ---- */
.logo{width:100%;display:block;margin:4px auto 0}
.where{
  text-align:center;font-size:13px;font-weight:600;color:#6F6F79;margin-top:6px;line-height:1.5;
}
.openpill{
  display:block;margin:16px auto 0;padding:7px 16px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:1px;text-align:center;width:fit-content;
  border:1px solid var(--line);color:var(--dim);
}
.openpill.open{border-color:#1F7A4D;color:#3ED98A}
.openpill .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle}

/* ---- section heads ---- */
h2{
  font-size:11px;font-weight:800;letter-spacing:2.6px;color:#6F6F79;
  text-transform:uppercase;margin:30px 0 12px;display:flex;align-items:center;gap:12px;
}
h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- primary buttons ---- */
.btn{
  display:flex;align-items:center;gap:15px;width:100%;
  padding:16px 18px;margin-bottom:11px;border-radius:16px;
  background:#0B0B0E;border:1.5px solid var(--line);
  color:var(--ink);text-decoration:none;transition:transform .12s ease,border-color .12s ease;
}
.btn:active{transform:scale(.985)}
.btn .ico{
  flex:0 0 42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#141419;
}
.btn .ico svg{width:22px;height:22px;display:block}
.btn .txt{flex:1;min-width:0}
.btn .t{display:block;font-size:15.5px;font-weight:800;letter-spacing:.2px;line-height:1.25}
.btn .s{display:block;font-size:12.5px;font-weight:500;color:var(--dim);margin-top:3px;line-height:1.35}
.btn .chev{flex:0 0 auto;color:#4A4A54;font-size:19px;font-weight:700}

/* accent variants */
.btn.hero{background:linear-gradient(#0B0B0E,#0B0B0E) padding-box,var(--grad) border-box;border-color:transparent}
.btn.hero .ico{background:var(--grad)}
.btn.wa .ico{background:#1FAF54}
.btn.wa2 .ico{background:#0E5C2E}
.btn.pink .ico{background:var(--pink)}
.btn.purple .ico{background:var(--purple)}

/* ---- socials ----
   The owner, 10 September 2026: "Set the Social Media follows to be more
   CONSPICUOUS and more Bold, and put it to the TOP of the page. Then put
   all the info after."

   So these are no longer three grey tiles at the bottom. They are the first
   thing under the logo, each carrying its own platform's colour, with the
   label in white rather than the muted grey used for supporting text. */
.follow-head{
  font-size:14px;font-weight:900;letter-spacing:3px;color:var(--ink);
  margin:22px 0 14px;
}
.follow-head::after{background:var(--grad);height:2px;opacity:.65}

.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.soc{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:20px 6px;border-radius:18px;background:#0B0B0E;border:1.5px solid var(--line);
  color:var(--ink);text-decoration:none;transition:transform .12s ease;
}
.soc:active{transform:scale(.97)}
.soc svg{width:26px;height:26px;display:block}

/* White, and heavier. The label is the point of the tile, not a caption
   under it. */
.soc span{font-size:13px;font-weight:800;letter-spacing:.4px;color:var(--ink)}

/* The icon sits on its own platform colour, which is what makes the row
   readable at a glance from across a table. */
.soc__badge{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
}
.soc--tiktok .soc__badge{background:#0B0B0E;border:1.5px solid #2A2A31}
.soc--ig .soc__badge{background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.soc--fb .soc__badge{background:#1877F2}

/* The hero treatment: a gradient hairline around the row so it reads as one
   deliberate block at the top of the page rather than three loose buttons. */
.socials--hero{
  padding:14px;border-radius:22px;
  background:
    linear-gradient(#0B0B0E,#0B0B0E) padding-box,
    var(--grad) border-box;
  border:1.5px solid transparent;
}
.socials--hero .soc{background:#101015;border-color:#2A2A31}

/* ---- footer ---- */
footer{margin-top:34px;text-align:center;border-top:1px solid var(--line);padding-top:20px}
footer .n{font-size:12px;font-weight:700;color:#6F6F79;letter-spacing:.6px;line-height:1.9}
footer .n a{color:#8A8A94;text-decoration:none}
footer .bar{height:3px;width:62px;margin:16px auto 0;border-radius:2px;background:var(--grad)}
.setup{
  margin-top:18px;padding:12px 14px;border:1px dashed #4A3A12;border-radius:12px;
  background:#15100A;color:#C79A3E;font-size:11.5px;line-height:1.55;font-weight:600;
}