@font-face{font-family:"Dela Gothic One";font-weight:400;font-display:swap;src:url(fonts/dela-gothic-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  /* Palette lifted from the GlowVault logo: the vault, its crystals, its gold trim. */
  --ink:#0e1736;
  --navy:#1a2858;
  --navy-2:#24356f;
  --crystal:#5cb8ff;
  --amethyst:#9b6bff;
  --gold:#f4c04e;
  --gold-deep:#a8761f;
  --paper:#f2f5ff;
  --mist:#b4bfe3;
  /* OneGameStop's own colour, used only where the pop-up is concerned. */
  --ogs:#ff8a1f;

  --display:"Dela Gothic One","Arial Black",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;

  /* Type scale: 1.25 ratio on an 18px base (16px on phones) */
  --t-sm:.875rem;
  --t-base:1.125rem;
  --t-md:1.375rem;
  --t-lg:1.75rem;
  --t-xl:clamp(2rem,4.4vw,2.75rem);
  --t-hero:clamp(2.25rem,5.4vw,4.25rem);

  /* Spacing: 4px base, only these steps are used below */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;

  --gutter:var(--s-5);
  --section:var(--s-9);
  --wrap:1152px;
  --tap:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font:400 var(--t-base)/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* A faint vault-light behind the hero only; the rest of the page stays flat ink. */
body::before{
  content:"";position:absolute;inset:0 0 auto 0;height:900px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 420px at 76% 38%,rgba(155,107,255,.22),transparent 70%),
    radial-gradient(420px 360px at 70% 30%,rgba(92,184,255,.18),transparent 70%);
}
img{display:block;max-width:100%}
a{color:inherit;touch-action:manipulation}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.005em;text-wrap:balance}
p{max-width:60ch}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-4);top:-100px;z-index:10;padding:var(--s-3) var(--s-4);border-radius:8px;background:var(--gold);color:var(--ink);font-weight:700;text-decoration:none}
.skip:focus{top:var(--s-4)}

/* Shared section rhythm: same divider, same padding, same heading-to-intro and intro-to-content gaps. */
.sec{padding:var(--section) 0;border-top:1px solid var(--navy)}
.sec h2{font-size:var(--t-xl)}
.sec .intro{margin-top:var(--s-4);color:var(--mist)}
.sec .body{margin-top:var(--s-7)}

/* ---------- header ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) 0}
.bar .home{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);text-decoration:none;font-family:var(--display);font-size:var(--t-md)}
.bar .home img{width:44px;height:44px;border-radius:50%;clip-path:circle(47%)}
.bar .ig{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-width:var(--tap);min-height:var(--tap);padding:0 var(--s-2);font-weight:700;text-decoration:none;color:var(--mist)}
.bar .ig:hover{color:var(--paper)}
.bar .ig svg{width:24px;height:24px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--s-7);padding:var(--s-8) 0 var(--section)}
.hero h1{font-size:var(--t-hero)}
.hero p{margin-top:var(--s-5);font-size:var(--t-md);line-height:1.5;color:var(--mist);max-width:36ch}
.cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);border-radius:12px;font-weight:700;font-size:var(--t-base);line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.btn svg{width:20px;height:20px;flex:none}
.btn-ogs{background:var(--ogs);color:#1d0c00}
.btn-ogs:hover{background:#ff9d40}
.btn-ogs:active{background:#e87a12}
.btn-line{border:2px solid var(--navy-2);color:var(--paper)}
.btn-line:hover{border-color:var(--crystal)}
.btn-line:active{background:var(--navy)}

/* The one loud thing on the page: the logo as a holo card in a toploader. */
.stage{display:flex;flex-direction:column;align-items:center;perspective:1000px;touch-action:pan-y}
.toploader{
  --rx:0deg;--ry:0deg;--px:50%;--py:50%;--gx:50%;--gy:30%;
  position:relative;width:min(320px,100%);padding:var(--s-3) var(--s-3) var(--s-4);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 120px -20px rgba(92,184,255,.35);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.toploader.live{transition:transform .08s linear}
/* the open lip at the top of a toploader */
.toploader::before{content:"";position:absolute;left:var(--s-3);right:var(--s-3);top:var(--s-1);height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.card{
  position:relative;aspect-ratio:63/88;border-radius:4.5%/3.2%;padding:var(--s-2);overflow:hidden;
  background:linear-gradient(135deg,#fbe7b0 0%,#c8902f 22%,#fff1c4 44%,#b57b22 66%,#f4cf7a 84%,#c8902f 100%);
}
.face{
  position:relative;height:100%;border-radius:3%/2.2%;background:#fff;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:var(--s-5) var(--s-4) var(--s-4);
}
.face img{width:100%;aspect-ratio:1;-webkit-mask-image:radial-gradient(circle closest-side,#000 91%,transparent 96%);mask-image:radial-gradient(circle closest-side,#000 91%,transparent 96%)}
.face .lines{text-align:center;font-weight:700;font-size:.8125rem;line-height:1.4}
.face .lines span{display:block;margin-bottom:var(--s-1);color:var(--gold-deep);font-family:var(--display);font-weight:400;font-size:1.0625rem;letter-spacing:.02em}
.holo,.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.holo{
  background:repeating-linear-gradient(115deg,#ff9fd8 0%,#a6dcff 7%,#b6ffd8 14%,#fff2a6 21%,#d7b5ff 28%,#ff9fd8 35%);
  background-size:260% 260%;background-position:var(--px) var(--py);
  mix-blend-mode:multiply;opacity:.32;
}
.glare{background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.85),rgba(255,255,255,0) 42%);mix-blend-mode:soft-light}
.sweep{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.sweep::after{
  content:"";position:absolute;inset:-20%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);
  transform:translateX(-120%);animation:sweep 1.6s .4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes sweep{to{transform:translateX(120%)}}

/* ---------- pop-up ---------- */
.popup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:start}
.popup h2 .ogs{display:block;margin-top:var(--s-2);font-size:var(--t-md);color:var(--ogs)}
.address{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-5);border-left:4px solid var(--ogs);background:var(--navy)}
.address .txt{min-width:0}
.address strong{display:block;font-size:var(--t-md);line-height:1.3}
.address .sub{display:block;margin-top:var(--s-1);color:var(--mist)}
.address .btn{margin-top:var(--s-5)}
/* a shop price sticker, because that is what "free" looks like at a card table */
.sticker{
  flex:none;width:112px;height:112px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);text-align:center;
  background:var(--ogs);color:#1d0c00;transform:rotate(9deg);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
  border:3px dashed rgba(29,12,0,.25);
}
.sticker b{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1}
.sticker small{font-size:.8125rem;font-weight:700;line-height:1.2}

.dates h3{font-size:var(--t-md)}
.dates .lead{margin-top:var(--s-2);color:var(--mist);font-size:var(--t-sm)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-6)}
.tile{
  position:relative;aspect-ratio:63/88;border-radius:10px;padding:var(--s-5) var(--s-3) var(--s-3);
  display:flex;flex-direction:column;background:var(--navy);border:2px solid var(--navy-2);
}
.tile .days{font-family:var(--display);font-size:1.5rem;line-height:1;white-space:nowrap}
.tile .month{margin-top:var(--s-2);font-weight:700;color:var(--crystal)}
.tile .wd{margin-top:auto;font-size:var(--t-sm);color:var(--mist)}
.tile .no{align-self:flex-end;margin-top:var(--s-1);font-size:var(--t-sm);font-weight:700;color:var(--mist);font-variant-numeric:tabular-nums}
.tile .flag{position:absolute;top:calc(-1 * var(--s-3));left:var(--s-3);padding:var(--s-1) var(--s-2);border-radius:6px;font-size:var(--t-sm);font-weight:700;line-height:1.2;display:none}
.tile.now{border-color:var(--ogs);background:linear-gradient(180deg,#2c2550,var(--navy))}
.tile.now .flag{display:block;background:var(--ogs);color:#1d0c00}
.tile.next .flag{display:block;background:var(--navy-2);color:var(--paper)}
/* weekends that have been: still listed so the full run is visible, but clearly done */
.tile.past{opacity:.5;border-style:dashed}
.tile.past .flag{display:block;background:var(--navy-2);color:var(--mist)}

/* ---------- what we bring ---------- */
.goods{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.goods li{display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-6);border-radius:16px;background:var(--navy)}
.goods svg{flex:none;width:56px;height:56px}
.goods h3{font-size:var(--t-lg)}
.goods p{margin-top:var(--s-2);color:var(--mist)}
.acts-h{margin-top:var(--s-8);font-size:var(--t-md)}
.acts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-5)}
.acts li{padding-top:var(--s-4);border-top:2px solid var(--navy-2)}
.acts svg{display:block;width:24px;height:24px;color:var(--crystal)}
.acts strong{display:block;margin-top:var(--s-3)}
.acts span{display:block;margin-top:var(--s-1);color:var(--mist);font-size:var(--t-sm)}
.ask{margin-top:var(--s-7);color:var(--mist)}
.ask a{color:var(--gold);font-weight:700}

/* ---------- two names ---------- */
.accounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.acct{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5);border-radius:16px;background:var(--navy);text-decoration:none;border:2px solid transparent}
a.acct:hover{border-color:var(--navy-2)}
.acct .mark{flex:none;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden}
.acct .mark img{width:100%;height:100%;clip-path:circle(47%)}
/* the panda logo sits on OneGameStop's own purple; the crop's edges fade into it so the circle never clips the ears */
.acct .mark.ogs{background:#653993}
.acct .mark.ogs img{width:78%;height:78%;clip-path:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.acct .info{min-width:0}
.acct .who{display:block;font-family:var(--display);font-size:var(--t-md);line-height:1.2}
.acct .handle{display:block;margin-top:var(--s-1);font-weight:700;color:var(--crystal)}
.acct .what{display:block;margin-top:var(--s-1);color:var(--mist);font-size:var(--t-sm)}
.acct .also{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.acct .also a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-3);border-radius:8px;border:1px solid var(--navy-2);font-size:var(--t-sm);font-weight:700;color:var(--mist);text-decoration:none}
.acct .also a:hover{color:var(--paper);border-color:var(--crystal)}

footer{padding:var(--s-6) 0 var(--s-7);color:var(--mist);font-size:var(--t-sm);border-top:1px solid var(--navy)}
footer p{max-width:80ch}

/* ---------- responsive: 1024 / 768 ---------- */
@media (max-width:1023px){
  :root{--section:var(--s-8)}
  .hero{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-5) 0 var(--section)}
  .hero .stage{order:-1}
  .popup-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
  .goods li{padding:var(--s-5)}
  .tiles{max-width:640px}
}
@media (max-width:767px){
  :root{--t-base:1rem;--t-md:1.25rem;--t-xl:1.75rem;--gutter:var(--s-4);--section:var(--s-7)}
  .bar{padding:var(--s-3) 0}
  .bar .ig .label{display:none}
  .toploader{width:min(256px,72vw)}
  .face{padding:var(--s-4) var(--s-3) var(--s-3)}
  .face .lines{font-size:.75rem}
  .face .lines span{font-size:.9375rem}
  .sec .body{margin-top:var(--s-6)}
  .address{position:relative;display:block;padding:var(--s-8) var(--s-5) var(--s-5)}
  .sticker{position:absolute;right:var(--s-4);top:calc(-1 * var(--s-6));width:88px;height:88px}
  .sticker b{font-size:1rem}
  .sticker small{font-size:.75rem}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .tile{aspect-ratio:auto;min-height:144px}
  .tile .days{font-size:1.5rem}
  .tile.past{min-height:120px}
  .goods{grid-template-columns:1fr;gap:var(--s-3)}
  .goods li{flex-direction:row;align-items:center;gap:var(--s-4);padding:var(--s-4)}
  .goods svg{width:48px;height:48px}
  .goods h3{font-size:var(--t-md)}
  .goods p{margin-top:var(--s-1);font-size:var(--t-sm)}
  .acts-h{margin-top:var(--s-7)}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
  .ask{margin-top:var(--s-6)}
  .accounts{grid-template-columns:1fr;gap:var(--s-4)}
  .acct{align-items:flex-start;gap:var(--s-4);padding:var(--s-4)}
  .acct .mark{width:48px;height:48px}
  .acct .also a{padding:0 var(--s-2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sweep::after{animation:none}
  .toploader,.btn{transition:none}
}