/* ==========================================================================
   Bricker (آجرشکن) — theme tokens + home banner slide.
   The game's own look: a calm white board, hard ink top and floor lines,
   bricks from peach to violet by strength, blue balls, green +1 rings and an
   orange button with a brick lip. Also styles its slide in the home banner
   and the phone stage shared with its page.
   ========================================================================== */

[data-game="bricker"] {
  color-scheme: light;
  --g-bg: #ffffff;
  --g-board: #f6f7f9;
  --g-ink: #1b1d22;
  --g-ink-2: #4b5160;
  --g-ink-3: #5f6672;
  --g-accent: #ff8a3d;
  --g-accent-lip: #e26d20;
  --g-accent-ink: #b4500e;
  --g-line: #e6e8ec;
  --g-display: var(--font-display);

  --bk-peach: #ffc7a6;
  --bk-apricot: #ff9f7a;
  --bk-coral: #ff6b6b;
  --bk-rasp: #e0558f;
  --bk-violet: #8e5cf0;
  --bk-brick-ink: #3a1a12;
  --bk-ball: #3d8bfd;
  --bk-ball-ink: #1f6bdb;
  --bk-plus: #3ddc84;
  --bk-gold: #ffc53d;
  --bk-danger: #ff4d5e;
}

/* The primary button: ink on orange, on a 5 px brick lip that collapses on press. */
.btn--bk {
  --btn-ink: var(--g-ink);
  background: var(--g-accent);
  box-shadow: 0 5px 0 var(--g-accent-lip), 0 16px 28px -14px rgb(226 109 32 / 0.6);
  font-weight: 900;
}

.btn--bk:hover {
  background: #ff9550;
  box-shadow: 0 5px 0 var(--g-accent-lip), 0 20px 34px -14px rgb(226 109 32 / 0.7);
}

.btn--bk:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 1px 0 var(--g-accent-lip), 0 6px 14px -10px rgb(226 109 32 / 0.6);
}

.btn--bk:focus-visible {
  outline: 2px solid var(--g-ink);
  outline-offset: 4px;
}

/* A quiet white button with a light outline (the game's «خانه»). */
.btn--bk-ghost {
  --btn-bg: #fff;
  --btn-ink: var(--g-ink);
  box-shadow: inset 0 0 0 2px var(--g-line);
  font-weight: 800;
}

.btn--bk-ghost:hover {
  box-shadow: inset 0 0 0 2px #c9cdd4;
}

/* Store line: orange dot while it is on its way, the +1 green once live. */
.chip--bk {
  background: var(--g-board);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-2);
  font-weight: 600;
}

.chip--bk .chip__dot {
  background: var(--bk-plus);
  box-shadow: 0 0 0 3px rgb(61 220 132 / 0.25);
}

.chip--bk.chip--soon .chip__dot {
  background: var(--g-accent);
  box-shadow: 0 0 0 3px rgb(255 138 61 / 0.25);
}

/* The logo: five bricks along the strength scale, bobbing, one tipped over. */
.bk-logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.18em;
  direction: ltr;
  font-size: var(--bk-logo, 12px);
}

.bk-logo i {
  width: 3.4em;
  height: 2.2em;
  border-radius: 0.5em;
  background: var(--c, var(--bk-coral));
  animation: bk-bob 2.6s ease-in-out infinite;
}

.bk-logo i:nth-child(1) { --c: var(--bk-peach); }
.bk-logo i:nth-child(2) { --c: var(--bk-apricot); animation-delay: 0.15s; }
.bk-logo i:nth-child(3) { --c: var(--bk-coral); animation-name: bk-tilt; animation-delay: 0.3s; }
.bk-logo i:nth-child(4) { --c: var(--bk-rasp); animation-delay: 0.45s; }
.bk-logo i:nth-child(5) { --c: var(--bk-violet); animation-delay: 0.6s; }

@keyframes bk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.4em); }
}

@keyframes bk-tilt {
  0%, 100% { transform: translateY(-0.8em) rotate(-8deg); }
  50% { transform: translateY(-1.3em) rotate(-3deg); }
}

/* ---------- The board (the shared SVG in _partials/bricker-board.html) --- */

.bk-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-persian);
  direction: rtl;
}

.bk-svg text {
  font-weight: 900;
  fill: var(--g-ink);
}

.bk-svg .bk-t-brick { font-size: 19px; }
.bk-svg .bk-t-sm { font-size: 15px; }
.bk-svg .bk-t-row { font-size: 40px; }
.bk-svg .bk-t-label { font-size: 12px; font-weight: 700; fill: #6b7280; }
.bk-svg .bk-t-chip { font-size: 14px; font-weight: 800; }
.bk-svg .bk-t-mark { font-size: 11px; font-weight: 700; fill: var(--g-ink-2); }
.bk-svg .bk-t-mark--strong { font-weight: 800; fill: var(--g-ink); }
.bk-svg .bk-t-count { font-size: 15px; }
.bk-svg .bk-t-light { fill: #fff; }
.bk-svg .bk-t-dark { fill: var(--bk-brick-ink); }

.bk-svg .bk-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: bk-ring 1.2s ease-in-out infinite;
}

.bk-svg .bk-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: bk-spin 6s linear infinite;
}

.bk-svg .bk-still {
  display: none;
}

@keyframes bk-ring {
  0%, 100% { scale: 1; }
  50% { scale: 1.14; }
}

@keyframes bk-spin {
  to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-svg .bk-live { display: none; }
  .bk-svg .bk-still { display: inline; }
}

/* ---------- The phone stage (banner art and page hero) ------------------- */

/* A white phone, ink bezel, the board on it; around it a combo pop, a stray
   +1 ring and two loose bricks. */
.bk-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  margin-inline: auto;
  aspect-ratio: 1 / 0.96;
}

/* Sized by width so its height follows from the ratio and always fits the
   stage (0.57 / 0.6 = 0.95 of the stage's width; the stage is 0.96 tall). */
.bk-phone {
  position: relative;
  z-index: 1;
  width: 57%;
  aspect-ratio: 0.6;
  padding: 2.4%;
  border-radius: 13% / 7.5%;
  background: var(--g-ink);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.06),
    0 2px 0 rgb(255 255 255 / 0.05) inset,
    0 40px 70px -30px rgb(17 24 39 / 0.55),
    0 18px 30px -18px rgb(17 24 39 / 0.35);
  transform: rotate(calc(-4deg * var(--dir)));
  transition: transform 700ms var(--ease-out);
}

.bk-phone__screen {
  display: grid;
  align-content: center;
  height: 100%;
  padding: 9% 4% 4%;
  border-radius: 11% / 6.4%;
  background: #fff;
  overflow: hidden;
}

/* The notch-free camera dot. */
.bk-phone::before {
  content: "";
  position: absolute;
  top: 4.2%;
  left: 50%;
  width: 3.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b2e35;
  translate: -50% 0;
}

.bk-float {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: transform 900ms var(--ease-out);
}

.bk-float--brick {
  width: 14%;
  aspect-ratio: 56 / 36;
  border-radius: 12% / 18%;
  background: var(--c);
  box-shadow: 0 14px 22px -12px rgb(17 24 39 / 0.45);
}

.bk-float--a {
  --c: var(--bk-violet);
  top: 12%;
  inset-inline-end: 6%;
  transform: rotate(calc(14deg * var(--dir)));
  animation: bk-drift 5s ease-in-out infinite;
}

.bk-float--b {
  --c: var(--bk-peach);
  bottom: 14%;
  inset-inline-start: 5%;
  width: 11%;
  transform: rotate(calc(-18deg * var(--dir)));
  animation: bk-drift 6s ease-in-out -2s infinite;
}

.bk-float--ring {
  top: 46%;
  inset-inline-end: 9%;
  width: 7%;
  aspect-ratio: 1;
  border: 0.35em solid var(--bk-plus);
  border-radius: 50%;
  font-size: clamp(8px, 1vw, 12px);
  animation: bk-ring 1.2s ease-in-out infinite;
}

.bk-float--combo {
  top: 34%;
  inset-inline-start: 2%;
  padding: 0.25em 0.7em 0.3em;
  border-radius: var(--r-pill);
  background: var(--bk-rasp);
  box-shadow: 0 4px 0 #b83d72, 0 18px 26px -14px rgb(224 85 143 / 0.7);
  color: #fff;
  font-family: var(--font-persian);
  font-size: clamp(0.95rem, 0.7rem + 0.8vw, 1.4rem);
  font-weight: 900;
  line-height: 1.4;
  transform: rotate(calc(-8deg * var(--dir)));
  animation: bk-pop 3.2s var(--ease-out) infinite;
}

@keyframes bk-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10%; }
}

@keyframes bk-pop {
  0%, 100% { scale: 1; }
  8% { scale: 1.16; }
  18% { scale: 0.96; }
  28% { scale: 1; }
}

.bk-stage:hover .bk-phone,
.banner__art:hover .bk-phone {
  transform: rotate(0deg) translateY(-2%);
}

/* ---------- Home banner slide ------------------------------------------- */

/* A white slide inside the copper frame: the game's board, hard lines and all. */
.banner--bricker {
  --g-ink-3: var(--g-ink-2);
}

.banner--bricker .banner__bg {
  background:
    radial-gradient(60% 70% at var(--bk-glow-x, 72%) 50%, rgb(61 139 253 / 0.08), transparent 70%),
    var(--g-bg);
}

[dir="rtl"] .banner--bricker {
  --bk-glow-x: 28%;
}

/* The board's grid: 6 by 8 cells of 3:2, faint, fading out toward the copy. */
.banner--bricker .banner__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(27 29 34 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(27 29 34 / 0.045) 1px, transparent 1px);
  background-size: 60px 40px;
  mask-image: radial-gradient(70% 90% at var(--bk-glow-x, 72%) 50%, #000 20%, transparent 80%);
}

/* The hard top and floor lines. */
.banner--bricker .banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-block: clamp(4px, 0.6vw, 7px) solid var(--g-ink);
}

.banner--bricker .banner__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--g-ink-2);
  font-weight: 600;
}

.bk-new {
  padding: 2px 10px 3px;
  border-radius: var(--r-pill);
  background: var(--bk-plus);
  color: #0b3b20;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.banner--bricker .banner__title {
  display: grid;
  justify-items: inherit;
  gap: 0.18em;
  font-weight: 900;
}

:root[lang="en"] .banner--bricker .banner__title {
  letter-spacing: -0.04em;
}

.banner--bricker .bk-logo {
  --bk-logo: clamp(9px, 0.55rem + 0.25vw, 12px);
}

.banner--bricker .banner__tagline {
  color: var(--g-ink);
  font-weight: 800;
}

.bk-blue {
  color: var(--bk-ball-ink);
}

.banner--bricker .banner__art .bk-stage {
  width: min(100%, 50svh, 500px);
}

@media (max-width: 959px) {
  .banner--bricker .banner__art .bk-stage {
    width: min(100%, 36svh);
  }

  .banner--bricker .banner__bg::before {
    mask-image: radial-gradient(90% 60% at 50% 30%, #000 20%, transparent 80%);
  }
}