:root {
  --sage: #dfe3b0;
  --ink: #0d0d0d;
  --blue: #2324f2;
  --size: clamp(230px, 54vmin, 460px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--sage);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, "Segoe UI", Tahoma, system-ui, sans-serif;
  overflow: hidden;
  display: grid;
  place-items: center;
  -webkit-font-smoothing: antialiased;
}

/* ---------- زخارف البوستر ---------- */

.vf {
  position: fixed;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(13, 13, 13, 0.55);
  pointer-events: none;
  z-index: 3;
}
.vf--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.vf--tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.vf--bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.vf--br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

.halftone {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle, var(--ink) 1.15px, transparent 1.25px);
  background-size: 9px 9px;
  opacity: 0.85;
}
.ht--a {
  top: 14%;
  right: 6%;
  width: 90px;
  height: 80px;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 30% 40%, #000 30%, transparent 72%);
}
.ht--b {
  bottom: 22%;
  right: 9%;
  width: 120px;
  height: 90px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
}
.ht--c {
  top: 36%;
  left: 7%;
  width: 70px;
  height: 70px;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
}

.pixels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.pixels i {
  position: absolute;
  display: block;
  background: var(--ink);
  opacity: 0.75;
}
.pixels i:nth-child(1) { top: 17%; left: 12%; width: 7px; height: 7px; }
.pixels i:nth-child(2) { top: 19%; left: 15%; width: 4px; height: 4px; }
.pixels i:nth-child(3) { top: 74%; left: 8%; width: 6px; height: 6px; }
.pixels i:nth-child(4) { top: 77%; left: 6%; width: 8px; height: 8px; }
.pixels i:nth-child(5) { top: 26%; right: 8%; width: 5px; height: 5px; }
.pixels i:nth-child(6) { top: 68%; right: 14%; width: 7px; height: 7px; }

.crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  opacity: 0.7;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.crosshair::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }

/* ---------- نصوص البوستر ---------- */

.hud {
  position: fixed;
  top: 22px;
  left: 62px;
  z-index: 4;
  pointer-events: none;
}
.hud__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(13, 13, 13, 0.85);
}
.hud__rule {
  margin-top: 7px;
  width: 26px;
  height: 2px;
  background: var(--ink);
  opacity: 0.8;
}

.credits {
  position: fixed;
  bottom: 30px;
  left: 26px;
  z-index: 4;
  pointer-events: none;
}
.credits__title {
  font-size: clamp(20px, 3.2vmin, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.credits__meta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(13, 13, 13, 0.62);
}
.credits__bar {
  display: block;
  margin-top: 11px;
  width: 44px;
  height: 3px;
  background: var(--ink);
}

/* ---------- المكعب ---------- */

main {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.stage {
  display: grid;
  place-items: center;
  perspective: 1800px;
  perspective-origin: 50% 48%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage.grabbing {
  cursor: grabbing;
}

.cube {
  --sz: calc(var(--size) / 3);
  --pad: calc(var(--sz) * 0.11);
  --k: 1;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  will-change: transform;
}

.cubie {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sz);
  height: var(--sz);
  margin-top: calc(var(--sz) / -2);
  margin-left: calc(var(--sz) / -2);
  transform-style: preserve-3d;
  background: var(--blue);
  border-radius: calc(var(--sz) * 0.15);
}

.sticker {
  position: absolute;
  inset: var(--pad);
  border-radius: calc(var(--sz) * 0.1);
  background-image: url("/sefr.png");
  background-repeat: no-repeat;
  background-size: calc(var(--sz) * 3) calc(var(--sz) * 3);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  backface-visibility: visible;
}

/* ملاحظة: ممنوع أي `filter` على الستيكرز — بيفلطح الطبقة ويبوّظ الرندر 3D */
.st-right,
.st-bottom,
.st-back {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 40px rgba(0, 0, 0, 0.25);
}