/* ==========================================================================
   Bricker page — the only white page on the site. The page is the board:
   the header is its hard top line, the hero is the light board under it,
   and the studio's dark "more" strip and footer are the floor. Layout
   primitives live in assets/css/game.css; tokens in theme.css.
   ========================================================================== */

.game--bricker {
  --g-surface: var(--g-board);
  --g-surface-2: #eef0f3;
  --g-radius: 14px;
  background: var(--g-bg);
}

/* The header becomes the board's top line: solid ink, never see-through. */
.game--bricker .site-header {
  background: var(--g-ink);
}

.game--bricker .site-header::before {
  border-bottom: 0;
  background: var(--g-ink);
}

.game--bricker :focus-visible {
  outline-color: var(--g-ink);
}

/* ---------- Hero ---------------------------------------------------------- */

.bk-hero .g-hero__bg {
  background: var(--g-board);
}

/* The board's cells, faint, gathered behind the phone. */
.bk-hero .g-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(27 29 34 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(27 29 34 / 0.05) 1px, transparent 1px);
  background-size: 60px 40px;
  background-position: center top;
  mask-image: radial-gradient(60% 80% at var(--bk-glow-x, 75%) 50%, #000 15%, transparent 75%);
}

[dir="rtl"] .bk-hero {
  --bk-glow-x: 25%;
}

/* The floor line closes the hero. */
.bk-hero .g-hero__bg::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: var(--g-ink);
}

.bk-hero .g-crumbs a:hover {
  color: var(--g-ink);
}

.bk-hero .g-title {
  display: grid;
  justify-items: start;
  gap: 0.12em;
  font-weight: 900;
}

:root[lang="en"] .bk-hero .g-title {
  letter-spacing: -0.045em;
}

.bk-hero .bk-logo {
  --bk-logo: clamp(10px, 0.5rem + 0.5vw, 15px);
}

.bk-hero .g-tagline {
  font-weight: 800;
}

.bk-hero .g-lede {
  color: var(--g-ink-2);
}

.bk-hero .g-badges li {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
  font-weight: 600;
}

.bk-hero .chip--lg {
  font-weight: 700;
}

.bk-hero .bk-stage {
  width: min(100%, 560px, 72svh);
}

@media (max-width: 959px) {
  .bk-hero .bk-stage {
    width: min(100%, 52svh);
  }
}

/* ---------- Section heads ------------------------------------------------- */

.game--bricker .g-eyebrow {
  color: var(--g-accent-ink);
  font-weight: 800;
}

/* A tiny brick before every eyebrow. */
.game--bricker .g-eyebrow::before {
  content: "";
  width: 18px;
  height: 12px;
  border-radius: 3px;
  background: var(--g-accent);
}

.game--bricker .g-h2 {
  font-weight: 900;
}

.bk-band {
  background: var(--g-board);
  border-block: 1px solid var(--g-line);
}

/* ---------- How it plays: three moves ----------------------------------- */

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

@media (min-width: 860px) {
  .bk-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bk-step {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line), 0 2px 8px rgb(17 24 39 / 0.06);
  counter-increment: step;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
}

.bk-step:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--g-line), 0 22px 40px -22px rgb(17 24 39 / 0.3);
}

/* Concentric: 22 = 8 (art) + 14 (padding). */
.bk-step__art {
  display: block;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--g-board);
  overflow: hidden;
}

.bk-step__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.bk-step h3,
.bk-step p {
  padding-inline: 10px;
}

.bk-step h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-20);
  font-weight: 900;
}

.bk-step h3::before {
  content: counter(step, persian);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--g-ink);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 800;
}

:root[lang="en"] .bk-step h3::before {
  content: counter(step);
}

.bk-step p {
  color: var(--g-ink-2);
  font-size: var(--fs-15);
  line-height: 1.8;
}

:root[lang="fa"] .bk-step p {
  line-height: 2;
}

/* The little scenes inside the cards. */
.bk-mini .ball { fill: var(--bk-ball); }
.bk-mini .line { fill: var(--g-ink); }
.bk-mini .guide { fill: var(--bk-ball); }
.bk-mini .ring { fill: none; stroke: var(--bk-plus); stroke-width: 4; }
.bk-mini .ghost { fill: none; stroke: var(--bk-ball); stroke-opacity: 0.55; stroke-width: 2; }
.bk-mini .finger { fill: none; stroke: var(--g-ink); stroke-opacity: 0.35; stroke-width: 2; stroke-dasharray: 4 4; }
.bk-mini .shard { fill: var(--bk-coral); }
.bk-mini .burst { fill: none; stroke: #fff; stroke-width: 3; }
.bk-mini text {
  font-family: var(--font-persian);
  font-weight: 900;
  font-size: 19px;
  fill: var(--bk-brick-ink);
}
.bk-mini text.light { fill: #fff; }

.bk-mini .pulse,
.bk-mini .pop {
  transform-box: fill-box;
  transform-origin: center;
}

.bk-mini .pulse {
  animation: bk-ring 1.2s ease-in-out infinite;
}

.bk-mini .stream {
  animation: bk-stream 0.45s linear infinite;
}

.bk-mini .pop {
  animation: bk-pop 2.4s var(--ease-out) infinite;
}

@keyframes bk-stream {
  from { translate: 0 0; }
  to { translate: -26px -15px; }
}

/* ---------- Bricks ------------------------------------------------------- */

/* The strength scale: weak to double, one brick per step. */
.bk-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 14px);
  margin: 0 0 14px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
  list-style: none;
  direction: ltr;
}

.bk-scale li {
  display: grid;
  align-content: start;
  gap: 10px;
  justify-items: center;
}

.bk-brick {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 112px;
  aspect-ratio: 56 / 36;
  border-radius: 12% / 18%;
  background: var(--c, var(--bk-coral));
  color: var(--bk-brick-ink);
  font-family: var(--font-persian);
  font-size: clamp(1.05rem, 0.7rem + 1.4vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bk-brick--peach { --c: var(--bk-peach); }
.bk-brick--apricot { --c: var(--bk-apricot); }
.bk-brick--coral { --c: var(--bk-coral); }
.bk-brick--rasp { --c: var(--bk-rasp); color: #fff; }
.bk-brick--violet { --c: var(--bk-violet); color: #fff; }

.bk-scale li:hover .bk-brick {
  transform: scale(0.94);
}

.bk-scale small {
  color: var(--g-ink-3);
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: 700;
}

.bk-specials {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .bk-specials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .bk-specials {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bk-special {
  display: grid;
  grid-template-rows: 96px auto auto;
  align-content: start;
  gap: 8px;
  padding: 22px 22px 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
}

.bk-special__art {
  display: grid;
  align-items: center;
  justify-items: start;
}

.bk-special h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-18);
  font-weight: 900;
}

.bk-special p {
  color: var(--g-ink-2);
  font-size: var(--fs-14);
  line-height: 1.8;
}

:root[lang="fa"] .bk-special p {
  line-height: 2;
}

.bk-row {
  padding: 1px 9px 2px;
  border-radius: var(--r-pill);
  background: var(--g-board);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-3);
  font-size: var(--fs-12);
  font-weight: 700;
}

.bk-special .bk-brick {
  width: 84px;
  font-size: 1.25rem;
}

/* The number sits in the filled half (bottom right), in either direction. */
.bk-brick--tri {
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
  border-radius: 0 0 8px 0;
  direction: ltr;
  place-items: end;
  padding: 0 8px 3px;
  font-size: 1rem !important;
}

.bk-brick--bomb {
  position: relative;
  box-shadow: inset 0 0 0 3px rgb(27 29 34 / 0.45);
}

.bk-brick--bomb::after {
  content: "";
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--g-ink);
}

.bk-brick--ghost {
  outline: 2px dashed var(--bk-apricot);
  outline-offset: -2px;
  animation: bk-ghost 2.4s steps(1, end) infinite;
}

@keyframes bk-ghost {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.bk-special .bk-brick--boss {
  width: 140px;
  aspect-ratio: 120 / 80;
  gap: 2px;
  align-content: center;
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px var(--g-ink);
  font-size: 1.6rem;
}

.bk-brick--boss .icon {
  width: 22px;
  height: 22px;
  color: var(--bk-gold);
  fill: var(--bk-gold);
}

/* ---------- Items -------------------------------------------------------- */

.bk-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .bk-items {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bk-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
}

.bk-item__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint, #e3eeff);
  color: var(--ink, var(--bk-ball));
}

.bk-item__icon .icon {
  width: 22px;
  height: 22px;
}

.bk-item__icon--plus {
  background: transparent;
}

.bk-item__icon--plus::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 4px solid var(--bk-plus);
  border-radius: 50%;
  animation: bk-ring 1.2s ease-in-out infinite;
}

.bk-item__icon--scatter { --tint: #f1ebfe; --ink: var(--bk-violet); }
.bk-item__icon--split { --tint: #fce6ef; --ink: #a3285d; font-weight: 900; }
.bk-item__icon--shield { --tint: #ddf6f2; --ink: #0f8c7e; }
.bk-item__icon--power { --tint: #fff0e5; --ink: var(--g-accent-ink); }

.bk-item strong {
  font-size: var(--fs-15);
  font-weight: 800;
}

.bk-item span:last-child {
  color: var(--g-ink-3);
  font-size: var(--fs-13);
  line-height: 1.6;
}

/* ---------- Records: never alone ----------------------------------------- */

.bk-records {
  display: grid;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 960px) {
  .bk-records {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* A slice of the board: records slide down a row at a time and the next
   name is passed at the floor line. */
.bk-lane {
  position: relative;
  height: clamp(320px, 42vw, 440px);
  border-block: 4px solid var(--g-ink);
  background: var(--g-board);
  overflow: hidden;
}

.bk-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(27 29 34 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(27 29 34 / 0.05) 1px, transparent 1px);
  background-size: 60px 40px;
}

.bk-lane__marks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: bk-descend 9s cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}

.bk-mark {
  position: absolute;
  inset-inline: 0;
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 14px;
}

.bk-mark::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--dash, rgb(107 114 128 / 0.55));
  order: 2;
}

.bk-mark__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 2px 8px rgb(17 24 39 / 0.08);
  font-size: var(--fs-13);
  font-weight: 800;
  white-space: nowrap;
}

[dir="rtl"] .bk-mark__who {
  padding: 4px 4px 4px 12px;
}

.bk-mark__who::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--av, var(--bk-ball));
}

.bk-mark--1 { --y: 8%; --av: #3d8bfd; --dash: rgb(61 139 253 / 0.7); }
.bk-mark--2 { --y: 30%; --av: #3ddc84; --dash: rgb(47 184 108 / 0.7); }
.bk-mark--3 { --y: 52%; --av: var(--bk-gold); --dash: #e9b21f; }
.bk-mark--4 { --y: 74%; --av: #8e5cf0; --dash: rgb(142 92 240 / 0.7); }

.bk-lane__ball {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bk-ball);
  translate: -50% 0;
}

.bk-lane__toast {
  position: absolute;
  bottom: 38px;
  left: 50%;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--g-ink);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 800;
  white-space: nowrap;
  translate: -50% 0;
  animation: bk-toast 9s var(--ease-out) infinite;
}

@keyframes bk-descend {
  0%, 30% { translate: 0 0; }
  38%, 64% { translate: 0 9%; }
  72%, 100% { translate: 0 18%; }
}

@keyframes bk-toast {
  0%, 70% { opacity: 0; scale: 0.8; }
  76%, 94% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; }
}

.bk-meta {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .bk-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bk-meta li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--g-line);
}

.bk-meta .icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--tint, var(--g-board));
  color: var(--ink, var(--g-ink));
}

.bk-meta li:nth-child(1) { --tint: #fff6e0; --ink: #b07a00; }
.bk-meta li:nth-child(2) { --tint: #f1ebfe; --ink: var(--bk-violet); }
.bk-meta li:nth-child(3) { --tint: #fde8ea; --ink: #c8283a; }
.bk-meta li:nth-child(4) { --tint: #e3eeff; --ink: var(--bk-ball-ink); }

.bk-meta strong {
  font-size: var(--fs-15);
  font-weight: 800;
}

.bk-meta span {
  color: var(--g-ink-3);
  font-size: var(--fs-13);
}

/* ---------- Specs + closing call ---------------------------------------- */

.game--bricker .g-specs {
  background: var(--g-line);
}

.game--bricker .g-specs > div {
  background: #fff;
}

.game--bricker .g-specs dd {
  font-weight: 700;
}

.bk-cta {
  border-block: 4px solid var(--g-ink);
  border-radius: 0;
  box-shadow: none;
}

.bk-cta .g-cta__bg {
  background:
    radial-gradient(50% 70% at 50% 100%, rgb(61 139 253 / 0.1), transparent 70%),
    var(--g-board);
}

/* A row of bricks dropping in along the top line. */
.bk-cta__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 56px));
  gap: 4px;
  direction: ltr;
}

.bk-cta__row i {
  aspect-ratio: 56 / 36;
  border-radius: 6px;
  background: var(--c);
}

.bk-cta__row i:nth-child(1) { --c: var(--bk-peach); }
.bk-cta__row i:nth-child(2) { --c: var(--bk-apricot); }
.bk-cta__row i:nth-child(3) { --c: transparent; }
.bk-cta__row i:nth-child(4) { --c: var(--bk-coral); }
.bk-cta__row i:nth-child(5) { --c: var(--bk-rasp); }
.bk-cta__row i:nth-child(6) { --c: var(--bk-violet); }

@supports (animation-timeline: view()) {
  .bk-cta__row i {
    animation: bk-drop linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }

  .bk-cta__row i:nth-child(2) { animation-range: entry 13% cover 38%; }
  .bk-cta__row i:nth-child(4) { animation-range: entry 16% cover 41%; }
  .bk-cta__row i:nth-child(5) { animation-range: entry 19% cover 44%; }
  .bk-cta__row i:nth-child(6) { animation-range: entry 22% cover 47%; }

  @keyframes bk-drop {
    from { opacity: 0; translate: 0 -24px; }
    to { opacity: 1; translate: 0 0; }
  }
}

.bk-cta h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 900;
}

.bk-cta .g-actions {
  justify-content: center;
}

.bk-cta__ball {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bk-ball);
  box-shadow: 0 0 0 6px rgb(61 139 253 / 0.15);
}