/*
 * Blinkcade game pages: the click-to-play stage, the standard game page and
 * game landing pages (Shredquake). Loaded only on single game pages.
 *
 * Fonts: Barlow Condensed and Sedgwick Ave Display, bundled under the SIL
 * Open Font License (see assets/fonts/).
 */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-800-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/barlow-condensed-latin-900-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Sedgwick Ave Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sedgwick-ave-display-latin-400-normal.woff2") format("woff2");
}

/* ==========================================================================
   Page frame
   ========================================================================== */

html { background: #060823; }

body.is-game-page { background: #060823; }

.is-game-page .site-header {
  background: rgba(7, 8, 32, .86);
  border-bottom-color: rgba(160, 150, 255, .16);
}

.is-game-page .mobile-nav__panel { background: #07081f; }

.is-game-page .site-footer {
  margin-top: 0;
  border-top-color: rgba(160, 150, 255, .16);
  background: linear-gradient(180deg, rgba(11, 16, 54, .5), rgba(6, 8, 35, .96));
}

/* ==========================================================================
   Click-to-play stage (all game pages)
   ========================================================================== */

.bc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(46, 230, 255, .35);
  border-radius: 22px;
  background: #050717;
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, .12) inset,
    0 30px 80px rgba(0, 0, 0, .5),
    0 0 70px rgba(46, 230, 255, .12);
}

.bc-stage__player {
  position: absolute;
  inset: 0;
}

.bc-stage__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Players that are not a single iframe size themselves. */
.bc-stage--live {
  aspect-ratio: auto;
  overflow: visible;
}

.bc-stage--live .bc-stage__player { position: static; }

/* blinkcade-core 0.1 draws its own title bar and footer around the game. */
.bc-stage--sized { aspect-ratio: auto; }
.bc-stage--sized .bc-stage__player { position: relative; inset: auto; }
.bc-stage--sized .bc-stage__player iframe { height: auto; aspect-ratio: 16 / 9; }

/* blinkcade-core 0.2+ "frame" layout: the game fills the stage, with or without click-to-play. */
.bc-stage--live.bc-stage--framed { aspect-ratio: 16 / 9; overflow: hidden; }
.bc-stage--live.bc-stage--framed .bc-stage__player { position: absolute; inset: 0; }
.bc-stage--framed .blinkcade-player {
  height: 100%;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  background: #050717;
}
.bc-stage--framed .blinkcade-player__loading {
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 43, 214, .25) 0%, #0b0a26 55%, #050717 100%);
  font-family: var(--bc-font-body, inherit);
}
.bc-stage--framed .blinkcade-player__overlay button {
  border-color: rgba(46, 230, 255, .45);
  background: rgba(5, 7, 23, .72);
}
.bc-stage--framed .blinkcade-player__preview { border-radius: 22px 22px 0 0; }

.bc-stage__meta {
  margin: 12px 0 0;
  color: var(--bc-muted, #9aa3c7);
  font-size: .9rem;
  text-align: center;
}

.bc-stage__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 24px;
  overflow: hidden;
  border: 0;
  background: #050717;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.bc-stage__poster[hidden] { display: none; }

.bc-stage__poster:focus-visible {
  outline: 3px solid #2ee6ff;
  outline-offset: -6px;
}

.bc-stage__poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(.7);
  transform: scale(1.02);
  transition: transform .6s ease, filter .3s ease;
}

.bc-stage__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(6, 8, 35, .1) 0, rgba(6, 8, 35, .6) 75%);
}

.bc-stage__poster:hover .bc-stage__poster-img {
  transform: scale(1.05);
  filter: saturate(1.15) brightness(.8);
}

.bc-stage__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 30px 10px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe066, #ffc81a);
  color: #160a3a;
  font-family: "Barlow Condensed", var(--bc-font);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(255, 200, 26, .4), 0 0 0 6px rgba(255, 200, 26, .18);
  transition: transform .2s, box-shadow .2s;
}

.bc-stage__play-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #160a3a;
  color: #ffc81a;
}

.bc-stage__play-icon .bc-icon { margin-left: 3px; }

.bc-stage__poster:hover .bc-stage__play,
.bc-stage__poster:focus-visible .bc-stage__play {
  transform: scale(1.04);
  box-shadow: 0 18px 50px rgba(255, 200, 26, .5), 0 0 0 9px rgba(255, 200, 26, .2);
}

.bc-stage__hint {
  position: relative;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6, 8, 35, .72);
  color: #dcdcf7;
  font-size: .9rem;
  font-weight: 600;
}

/* Standard game page. */
.game-page .prose { margin-inline: 0; }

.game-page__player .bc-stage--deferred {
  max-width: min(100%, calc((100vh - var(--bc-header-h) - 150px) * 16 / 9));
}

/* ==========================================================================
   Landing page tokens and type
   ========================================================================== */

.sq {
  --sq-navy: #0b1036;
  --sq-indigo: #2a1b6e;
  --sq-hoodie: #2747e0;
  --sq-magenta: #ff2bd6;
  --sq-cyan: #2ee6ff;
  --sq-crown: #ffc81a;
  --sq-hazard: #ffd21a;
  --sq-ink: #060823;
  --sq-panel: rgba(17, 20, 66, .72);
  --sq-line: rgba(160, 150, 255, .22);
  --sq-soft: #d4d5f5;
  --sq-muted: #a7a9d8;
  --sq-display: "Barlow Condensed", "Arial Narrow", var(--bc-font);
  --sq-graffiti: "Sedgwick Ave Display", "Barlow Condensed", var(--bc-font);
  color: #fff;
}

.sq-section { padding: 96px 0; }

.sq-head {
  max-width: 760px;
  margin: 0 0 44px;
}

.sq-head--center {
  margin-inline: auto;
  text-align: center;
}

.sq-kicker {
  margin: 0 0 10px;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sq-h2 {
  margin: 0;
  color: #fff;
  font-family: var(--sq-display);
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.sq-h2--md { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.sq-h2--xl { font-size: clamp(3rem, 7.5vw, 6.4rem); }

.sq-sub {
  margin: 16px 0 0;
  color: var(--sq-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

.sq-head--center .sq-sub {
  margin-inline: auto;
  max-width: 620px;
}

/* Buttons */
.sq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.sq-actions--center { justify-content: center; }

.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-family: var(--sq-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}

.sq-btn:hover { transform: translateY(-2px); }
.sq-btn:active { transform: none; }

.sq-btn--primary {
  background: linear-gradient(135deg, #ffe066, var(--sq-crown));
  color: #160a3a;
  box-shadow: 0 12px 34px rgba(255, 200, 26, .32);
}

.sq-btn--primary:hover { box-shadow: 0 16px 44px rgba(255, 200, 26, .45); }

.sq-btn--ghost {
  border-color: rgba(46, 230, 255, .55);
  background: rgba(11, 16, 54, .55);
  color: #fff;
}

.sq-btn--ghost:hover {
  border-color: var(--sq-cyan);
  background: rgba(46, 230, 255, .12);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.sq-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(860px, calc(100vh - var(--bc-header-h)));
  min-height: min(860px, calc(100svh - var(--bc-header-h)));
  padding: 56px 0 64px;
  overflow: hidden;
}

.sq-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sq-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.sq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 8, 35, .95) 0%, rgba(6, 8, 35, .84) 36%, rgba(6, 8, 35, .3) 66%, rgba(6, 8, 35, .12) 100%),
    linear-gradient(180deg, rgba(6, 8, 35, .25) 0%, rgba(6, 8, 35, 0) 45%, #060823 100%);
}

.sq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 32px;
}

.sq-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  color: #a9f3ff;
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sq-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 26, .14);
  color: var(--sq-crown);
  font-size: .95rem;
  letter-spacing: .1em;
}

.sq-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.sq-status--available {
  background: rgba(46, 230, 255, .14);
  color: var(--sq-cyan);
}

.sq-title {
  margin: 22px 0 4px;
  font-size: clamp(3.6rem, 9.4vw, 8.6rem);
  font-weight: 400;
  line-height: .95;
}

.sq-title__logo {
  display: block;
  width: min(100%, 640px);
  height: auto;
}

/* Wordmark: three stacked copies of the title (offset shadow, outline, fill). */
.sq-wordmark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: .06em .1em .14em .02em;
  font-family: var(--sq-graffiti);
  font-weight: 400;
  letter-spacing: .01em;
  transform: rotate(-3.5deg);
  transform-origin: left center;
}

.sq-wordmark__shadow,
.sq-wordmark__stroke {
  position: absolute;
  inset: .06em .1em .14em .02em;
  z-index: -1;
  white-space: nowrap;
}

.sq-wordmark__shadow {
  z-index: -2;
  color: var(--sq-magenta);
  -webkit-text-stroke: .16em var(--sq-magenta);
  transform: translate(.05em, .07em);
  filter: drop-shadow(0 0 .2em rgba(255, 43, 214, .55));
}

.sq-wordmark__stroke {
  color: #150b47;
  -webkit-text-stroke: .16em #150b47;
}

.sq-wordmark__fill {
  display: block;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 8%, #c7f8ff 46%, #2ee6ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sq-tagline {
  margin: 18px 0 0;
  color: var(--sq-crown);
  font-family: var(--sq-display);
  font-size: clamp(1.7rem, 3.1vw, 2.75rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255, 200, 26, .35);
}

.sq-lead {
  max-width: 600px;
  margin: 18px 0 0;
  color: #e1e2fa;
  font-size: 1.16rem;
  line-height: 1.65;
}

.sq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sq-soft);
  font-size: .95rem;
  font-weight: 700;
}

.sq-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sq-chips .bc-icon { color: var(--sq-cyan); }

.sq-hero__art {
  position: relative;
  align-self: end;
}

.sq-hero__art::before {
  content: "";
  position: absolute;
  inset: 14% 4% 2% 8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 43, 214, .42), rgba(46, 230, 255, .14) 62%, transparent);
  filter: blur(14px);
}

.sq-hero__art img {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(46, 230, 255, .16));
}

/* ==========================================================================
   Play
   ========================================================================== */

.sq-play { padding-top: 72px; }

.sq-play__stage {
  max-width: min(100%, calc((100vh - var(--bc-header-h) - 150px) * 16 / 9));
  min-width: min(100%, 720px);
  margin-inline: auto;
}

.sq-play__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 18px 0 0;
  color: var(--sq-muted);
  font-size: .98rem;
}

.sq-play__account .bc-icon { color: var(--sq-cyan); }

.sq-play__account a {
  color: var(--sq-cyan);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sq-play__account a:hover { color: #fff; }

.sq-play__build { flex-basis: 100%; text-align: center; font-size: .88rem; opacity: .8; }

/* Not playable yet */
.sq-soon {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 48px;
}

.sq-soon__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 230, 255, .3);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 70px rgba(255, 43, 214, .12);
}

.sq-soon__media img {
  display: block;
  width: 100%;
  height: auto;
}

.sq-soon__media figcaption,
.sq-art-note {
  color: var(--sq-muted);
  font-size: .85rem;
}

.sq-soon__media figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6, 8, 35, .78);
  font-weight: 700;
}

/* Controls */
.sq-controls {
  max-width: 1120px;
  margin: 48px auto 0;
  padding: 28px 30px 26px;
  border: 1px solid var(--sq-line);
  border-radius: 22px;
  background: var(--sq-panel);
}

.sq-controls__title {
  margin: 0 0 20px;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sq-controls__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-controls__list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-controls__action {
  color: #fff;
  font-weight: 700;
}

.sq-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sq-keys__combo {
  display: inline-flex;
  gap: 4px;
}

.sq-keys__or {
  color: var(--sq-muted);
  font-size: .82rem;
}

.sq kbd {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(170, 175, 255, .38);
  border-bottom-width: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, #20257a, #12164a);
  color: #fff;
  font-family: var(--bc-font);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
}

.sq-controls__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--sq-line);
  color: var(--sq-muted);
}

.sq-controls__note .bc-icon { color: var(--sq-cyan); }

/* ==========================================================================
   Features
   ========================================================================== */

.sq-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.sq-feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 24, 96, .8), rgba(11, 13, 46, .92));
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.sq-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 43, 214, .5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 40px rgba(255, 43, 214, .12);
}

.sq-feature__media {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #050717;
}

.sq-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.sq-feature:hover .sq-feature__media img { transform: scale(1.04); }

.sq-feature__body { padding: 24px 28px 30px; }

.sq-feature__num {
  display: block;
  margin-bottom: 6px;
  color: var(--sq-magenta);
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .12em;
}

.sq-feature__title {
  margin: 0 0 10px;
  font-family: var(--sq-display);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.sq-feature__body p {
  margin: 0;
  color: var(--sq-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

.sq-art-note {
  margin: 22px 0 0;
  text-align: center;
}

/* ==========================================================================
   Power-ups
   ========================================================================== */

.sq-powerups {
  background:
    radial-gradient(ellipse at 50% 0, rgba(46, 230, 255, .1), transparent 60%),
    linear-gradient(180deg, rgba(11, 16, 54, .6), rgba(6, 8, 35, 0));
  border-top: 1px solid rgba(160, 150, 255, .12);
}

.sq-powerups__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-powerup {
  padding: 14px 16px 24px;
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  background: rgba(10, 12, 44, .8);
  text-align: center;
  transition: transform .25s, border-color .25s;
}

.sq-powerup:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 230, 255, .5);
}

.sq-powerup__img {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 4px;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, transparent 71%);
}

.sq-powerup__title {
  margin: 0 0 6px;
  font-family: var(--sq-display);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.sq-powerup p {
  margin: 0;
  color: var(--sq-muted);
  font-size: .94rem;
  line-height: 1.5;
}

/* ==========================================================================
   Crown City districts
   ========================================================================== */

.sq-districts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-district {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  background: rgba(10, 12, 44, .85);
}

.sq-district__art {
  height: 136px;
  background-repeat: no-repeat;
  background-position: bottom center, center;
  background-size: 100% 78%, cover;
}

.sq-district__body { padding: 20px 22px 26px; }

.sq-district__tag {
  margin: 0 0 8px;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sq-district__title {
  margin: 0 0 10px;
  font-family: var(--sq-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.sq-district__body p:last-child {
  margin: 0;
  color: var(--sq-soft);
  line-height: 1.6;
}

.sq-district--arcade-row .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='58' width='34' height='62'/%3E%3Crect x='30' y='30' width='40' height='90'/%3E%3Crect x='66' y='70' width='26' height='50'/%3E%3Crect x='88' y='18' width='46' height='102'/%3E%3Crect x='130' y='52' width='30' height='68'/%3E%3Crect x='156' y='38' width='42' height='82'/%3E%3Crect x='194' y='74' width='24' height='46'/%3E%3Crect x='214' y='26' width='38' height='94'/%3E%3Crect x='248' y='60' width='30' height='60'/%3E%3Crect x='274' y='12' width='44' height='108'/%3E%3Crect x='314' y='48' width='28' height='72'/%3E%3Crect x='338' y='34' width='36' height='86'/%3E%3Crect x='370' y='64' width='30' height='56'/%3E%3C/g%3E%3Cg fill='%23ff2bd6'%3E%3Crect x='96' y='30' width='5' height='3'/%3E%3Crect x='110' y='44' width='5' height='3'/%3E%3Crect x='222' y='40' width='5' height='3'/%3E%3Crect x='284' y='26' width='5' height='3'/%3E%3C/g%3E%3Cg fill='%232ee6ff'%3E%3Crect x='40' y='44' width='5' height='3'/%3E%3Crect x='166' y='52' width='5' height='3'/%3E%3Crect x='300' y='40' width='5' height='3'/%3E%3Crect x='346' y='50' width='5' height='3'/%3E%3C/g%3E%3Cg fill='%23ffc81a'%3E%3Crect x='120' y='60' width='5' height='3'/%3E%3Crect x='236' y='58' width='5' height='3'/%3E%3Crect x='354' y='66' width='5' height='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 100%, rgba(46, 230, 255, .45), transparent 60%),
    linear-gradient(180deg, #23165f 0%, #6a1d8a 58%, #ff2bd6 100%);
  background-size: 100% 78%, cover, cover;
  background-position: bottom center, center, center;
}

.sq-district--harbor-lights .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23070a26'%3E%3Crect x='300' y='8' width='8' height='112'/%3E%3Crect x='214' y='8' width='160' height='6'/%3E%3Crect x='250' y='14' width='2' height='42'/%3E%3Crect x='240' y='56' width='22' height='8'/%3E%3Crect x='0' y='84' width='72' height='36'/%3E%3Crect x='10' y='66' width='52' height='18'/%3E%3Crect x='82' y='92' width='92' height='28'/%3E%3Crect x='98' y='74' width='62' height='18'/%3E%3Crect x='112' y='56' width='40' height='18'/%3E%3Crect x='184' y='88' width='84' height='32'/%3E%3Crect x='330' y='80' width='70' height='40'/%3E%3Crect x='342' y='62' width='50' height='18'/%3E%3Crect x='76' y='44' width='2' height='48'/%3E%3Crect x='276' y='50' width='2' height='38'/%3E%3C/g%3E%3Cg fill='%23ffb347'%3E%3Ccircle cx='77' cy='42' r='3.5'/%3E%3Ccircle cx='277' cy='48' r='3.5'/%3E%3Ccircle cx='304' cy='6' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 70% 110%, rgba(255, 170, 70, .55), transparent 62%),
    linear-gradient(180deg, #0b1036 0%, #123a7a 62%, #2a5fa8 100%);
  background-size: 100% 78%, cover, cover;
  background-position: bottom center, center, center;
}

.sq-district--harbor-lights .sq-district__tag { color: #ffb347; }

.sq-district--the-rooftops .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='96' width='400' height='24'/%3E%3Crect x='62' y='70' width='3' height='26'/%3E%3Crect x='88' y='70' width='3' height='26'/%3E%3Crect x='56' y='40' width='42' height='32' rx='3'/%3E%3Cpath d='M53 41 77 25 101 41z'/%3E%3Crect x='150' y='82' width='30' height='14'/%3E%3Crect x='186' y='86' width='22' height='10'/%3E%3Crect x='230' y='58' width='54' height='26'/%3E%3Crect x='238' y='84' width='3' height='12'/%3E%3Crect x='272' y='84' width='3' height='12'/%3E%3Crect x='300' y='30' width='3' height='66'/%3E%3Crect x='292' y='44' width='19' height='2'/%3E%3Crect x='295' y='56' width='13' height='2'/%3E%3Crect x='350' y='72' width='14' height='24'/%3E%3C/g%3E%3Crect x='233' y='61' width='48' height='20' fill='%23ff2bd6' opacity='.6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 72% 36%, #fff6fc 0 15px, rgba(255, 210, 240, .5) 16px 21px, transparent 46px),
    linear-gradient(180deg, #1a1356 0%, #3a2a8f 58%, #ff7ad9 100%);
  background-size: 100% 78%, cover, cover;
  background-position: bottom center, center, center;
}

.sq-district--the-rooftops .sq-district__tag { color: #ff8be3; }

.sq-district--next {
  border-style: dashed;
  background: rgba(10, 12, 44, .5);
}

.sq-district--next .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='50' width='400' height='12'/%3E%3Crect x='40' y='62' width='14' height='58'/%3E%3Crect x='190' y='62' width='14' height='58'/%3E%3Crect x='340' y='62' width='14' height='58'/%3E%3Crect x='72' y='98' width='60' height='22'/%3E%3Cpath d='M64 98 102 84 140 98z'/%3E%3Crect x='236' y='100' width='70' height='20'/%3E%3Cpath d='M228 100 271 86 314 100z'/%3E%3C/g%3E%3Cg fill='%23ffb347'%3E%3Ccircle cx='60' cy='72' r='2.6'/%3E%3Ccircle cx='82' cy='76' r='2.6'/%3E%3Ccircle cx='104' cy='77' r='2.6'/%3E%3Ccircle cx='126' cy='76' r='2.6'/%3E%3Ccircle cx='148' cy='72' r='2.6'/%3E%3Ccircle cx='224' cy='72' r='2.6'/%3E%3Ccircle cx='250' cy='76' r='2.6'/%3E%3Ccircle cx='276' cy='77' r='2.6'/%3E%3Ccircle cx='302' cy='76' r='2.6'/%3E%3C/g%3E%3Cg fill='%23ff3b3b'%3E%3Crect x='20' y='44' width='6' height='3'/%3E%3Crect x='120' y='44' width='6' height='3'/%3E%3Crect x='300' y='44' width='6' height='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #151a3d 0%, #2c2b5e 62%, #b0602c 100%);
  background-size: 100% 78%, cover;
  background-position: bottom center, center;
  opacity: .75;
}

.sq-district--next .sq-district__tag { color: var(--sq-muted); }

/* ==========================================================================
   The chase
   ========================================================================== */

.sq-chase__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
}

.sq-chase__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-radius: 24px;
  background: #03051a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.sq-chase__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The drone's spotlight. */
.sq-chase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 162deg at 50% 60%, transparent 0deg, rgba(255, 246, 214, .2) 18deg, transparent 36deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 55%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 55%, #000 72%, transparent 100%);
  pointer-events: none;
}

.sq-steps {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sq-step;
}

.sq-steps li {
  position: relative;
  padding: 18px 20px 18px 74px;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  background: var(--sq-panel);
  counter-increment: sq-step;
}

.sq-steps li::before {
  content: counter(sq-step);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--sq-magenta);
  border-radius: 50%;
  color: var(--sq-magenta);
  font-family: var(--sq-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 900;
}

.sq-steps li:last-child::before {
  border-color: var(--sq-crown);
  color: var(--sq-crown);
}

.sq-steps h3 {
  margin: 0 0 4px;
  font-family: var(--sq-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.sq-steps p {
  margin: 0;
  color: var(--sq-soft);
  line-height: 1.55;
}

/* ==========================================================================
   Daily Run and account
   ========================================================================== */

.sq-pair { padding-top: 24px; }

.sq-pair__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.sq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 38px 38px 40px;
  border: 1px solid var(--sq-line);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(42, 27, 110, .85), rgba(11, 13, 46, .95));
}

.sq-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 230, 255, .2), transparent 70%);
  pointer-events: none;
}

.sq-card--daily::after { background: radial-gradient(circle, rgba(255, 200, 26, .2), transparent 70%); }

.sq-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sq-cyan), var(--sq-hoodie));
  color: #fff;
  box-shadow: 0 10px 28px rgba(46, 230, 255, .25);
}

.sq-card--daily .sq-card__icon {
  background: linear-gradient(135deg, #ffe066, #ff9d1a);
  color: #160a3a;
  box-shadow: 0 10px 28px rgba(255, 200, 26, .25);
}

.sq-card__text {
  margin: 16px 0 0;
  color: var(--sq-soft);
  font-size: 1.08rem;
  line-height: 1.65;
}

.sq-card__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: #fff;
  font-weight: 700;
}

.sq-card__note .bc-icon { color: var(--sq-crown); }

.sq-card__cta { margin-top: 26px; }

/* ==========================================================================
   Developer notes (editor content)
   ========================================================================== */

.sq-notes .prose { color: var(--sq-soft); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.sq-faq__list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--sq-line);
}

.sq-faq__item { border-bottom: 1px solid var(--sq-line); }

.sq-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}

.sq-faq__item summary::-webkit-details-marker { display: none; }

.sq-faq__item summary:hover { color: var(--sq-cyan); }

.sq-faq__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(46, 230, 255, .5);
  border-radius: 50%;
}

.sq-faq__toggle::before,
.sq-faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--sq-cyan);
  transition: transform .2s;
}

.sq-faq__toggle::after { transform: rotate(90deg); }

.sq-faq__item[open] .sq-faq__toggle::after { transform: rotate(0deg); }

.sq-faq__item p {
  max-width: 720px;
  margin: 0;
  padding: 0 4px 24px;
  color: var(--sq-soft);
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ==========================================================================
   Closing banner
   ========================================================================== */

.sq-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 140px 0 150px;
  text-align: center;
}

.sq-final__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sq-final__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.sq-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #060823 0%, rgba(6, 8, 35, .55) 30%, rgba(6, 8, 35, .55) 70%, #060823 100%),
    radial-gradient(ellipse at center, rgba(6, 8, 35, .35), rgba(6, 8, 35, .8));
}

.sq-final .sq-h2 { text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }

.sq-final .sq-sub {
  max-width: 620px;
  margin-inline: auto;
  color: #fff;
  font-size: 1.25rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .sq-powerups__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sq-districts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .sq-section { padding: 76px 0; }
  .sq-hero { min-height: 0; padding: 48px 0 24px; }
  .sq-hero::before {
    background:
      linear-gradient(180deg, rgba(6, 8, 35, .55) 0%, rgba(6, 8, 35, .82) 45%, #060823 100%);
  }
  .sq-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sq-hero__art { align-self: center; }
  .sq-hero__art img { max-width: 340px; margin-inline: auto; }
  .sq-play__stage { min-width: 0; }
  .sq-soon,
  .sq-chase__grid,
  .sq-pair__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sq-chase__media { max-width: 560px; }
}

@media (max-width: 700px) {
  .sq-section { padding: 60px 0; }
  .sq-head { margin-bottom: 30px; }
  .sq-title { font-size: clamp(3rem, 15.5vw, 4.6rem); }
  .sq-lead { font-size: 1.06rem; }
  .sq-actions { flex-direction: column; align-items: stretch; }
  .sq-btn { width: 100%; }
  .sq-chips { gap: 8px 16px; font-size: .9rem; }
  .sq-hero__art img { max-width: 260px; }
  .sq-features__grid,
  .sq-districts { grid-template-columns: minmax(0, 1fr); }
  .sq-powerups__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sq-powerup { padding: 10px 10px 18px; }
  .sq-powerup__img { width: 104px; height: 104px; }
  .sq-feature__body { padding: 20px 20px 24px; }
  .sq-controls { padding: 22px 20px; }
  .sq-controls__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .sq-card { padding: 28px 24px 30px; }
  .sq-steps li { padding-left: 66px; }
  .sq-faq__item summary { font-size: 1.06rem; }
  .sq-final { padding: 96px 0 100px; }
  .bc-stage { border-radius: 16px; }
  .bc-stage__play { padding-right: 22px; }
  .bc-stage__play-icon { width: 44px; height: 44px; }
  .bc-stage__hint { display: none; }
}

@media (max-width: 420px) {
  .sq-controls__list { grid-template-columns: minmax(0, 1fr); }
}

/* Phones held upright: a portrait stage, so the game uses its portrait layout
   instead of squeezing into a 16:9 strip about 200px tall. */
@media (max-width: 700px) and (orientation: portrait) {
  .bc-stage.bc-stage--framed {
    aspect-ratio: 3 / 4;
    max-height: calc(100vh - var(--bc-header-h) - 24px);
    max-height: calc(100svh - var(--bc-header-h) - 24px);
  }
}

/* Phones on their side: the whole stage fits under the header. */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .sq-play__stage,
  .game-page__player .bc-stage--deferred { min-width: 0; max-width: 100%; }
  .bc-stage.bc-stage--framed {
    aspect-ratio: auto;
    height: calc(100vh - var(--bc-header-h) - 16px);
    height: calc(100svh - var(--bc-header-h) - 16px);
    min-height: 220px;
  }
}