/* Home landing — side code boards + CMD prelude + duel modal */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

.landing-body .landing-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, min(580px, 94vw)) minmax(0, 1fr);
  align-items: center;
  align-self: stretch;
  /* داخل flex body: لا توسّع الصفحة أكثر من 100vh */
  min-height: 0;
  overflow: hidden;
  /* مسافة أفقية متساوية بين العمودين الجانبيين والكارت — بدون translateX مختلفة */
  gap: clamp(14px, 2.4vw, 32px);
}

.landing-body .landing-main > .login-card {
  justify-self: center;
  align-self: center;
  width: min(440px, 100%);
}

.landing-body .landing-main > .login-card.login-card--register {
  width: min(560px, 100%);
}

/*
 * html[dir=rtl] يعكس أعمدة الـ grid فينعكس ترتيب اللوحات والزر.
 * ثبّت التخطيط البصري كما الإنجليزي؛ أبقِ القراءة RTL داخل كارد تسجيل الدخول فقط.
 */
html[dir='rtl'] .landing-body .landing-main {
  direction: ltr;
}

html[dir='rtl'] .landing-body .landing-main > .login-card {
  direction: rtl;
}

html[dir='rtl'] .landing-body .landing-main .landing-code-col {
  direction: ltr;
}

/* لوحات جانبية: إزاحة عمودية فقط؛ التقارب من الوسط يحدده gap الشبكة بالتساوي */
.landing-code-col {
  position: relative;
  z-index: 4;
  min-width: 0;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-code-col--left {
  justify-self: end;
  transform: translateY(clamp(44px, 9vh, 124px));
}

.landing-code-col--right {
  justify-self: start;
  transform: translateY(clamp(44px, 9vh, 124px));
}

/* نموذج التسجيل أطول: سماح بالتمرير داخل main فقط عند الحاجة */
.landing-body:not(.landing-body--logged-in) .landing-main:has(.login-card--register) {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Register: هامش سفلي أقل — لا يدفع ارتفاع الصفحة خارج 100vh */
.landing-body .landing-main:has(.login-card--register) {
  align-items: center;
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  gap: clamp(14px, 2.4vw, 32px);
}

.landing-body .landing-main:has(.login-card--register) > .login-card {
  margin-top: 45px;
}

.landing-body .landing-main:has(.login-card--register) .landing-code-col--left {
  transform: translateY(clamp(30px, 5.5vh, 88px));
}

.landing-body .landing-main:has(.login-card--register) .landing-code-col--right {
  transform: translateY(clamp(30px, 5.5vh, 88px));
}

/* عمود يسار: اللوحة بنفس أبعاد اليمنى، والزر بعد نهاية اللوحة */
.landing-code-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(300px, 94%);
}

.landing-code-stack .landing-code-board {
  width: 100%;
}

.landing-code-after {
  flex-shrink: 0;
}

.landing-start-below.landing-login-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
}

.landing-code-board {
  position: relative;
  box-sizing: border-box;
  width: min(300px, 94%);
  max-height: min(32vh, 300px);
  padding: 11px 13px 13px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(
    165deg,
    rgba(10, 7, 14, 0.62) 0%,
    rgba(8, 6, 12, 0.42) 55%,
    rgba(6, 5, 11, 0.52) 100%
  );
  box-shadow:
    0 0 1px rgba(var(--accent-rgb), 0.55),
    0 0 48px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 90, 90, 0.1),
    inset 0 -28px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  perspective: 900px;
  display: flex;
  flex-direction: column;
}

.landing-code-board__tilt {
  flex: 1;
  min-height: 0;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(880px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 75ms linear;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.landing-code-board__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
  flex-shrink: 0;
}

.landing-code-board__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.85);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}

.landing-code-board__dot:nth-child(2) {
  opacity: 0.65;
}

.landing-code-board__dot:nth-child(3) {
  opacity: 0.42;
}

.landing-code-board__label {
  margin-inline-start: auto;
  font-family:
    'JetBrains Mono',
    ui-monospace,
    monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff6b6b;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.65);
}

.landing-code-board__pre {
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family:
    'JetBrains Mono',
    ui-monospace,
    monospace;
  font-size: clamp(0.56rem, 0.88vw, 0.72rem);
  line-height: 1.45;
}

.landing-code-board__pre code {
  display: block;
}

.landing-code-line {
  display: block;
  opacity: 0.2;
  color: rgba(255, 190, 190, 0.55);
  filter: blur(0.35px);
  transition:
    opacity 0.22s ease,
    filter 0.22s ease,
    color 0.22s ease,
    text-shadow 0.22s ease;
  cursor: default;
  border-radius: 4px;
  padding: 1px 3px;
  margin: 0 -3px;
}

.landing-code-line:hover {
  opacity: 1;
  filter: none;
  color: #ffc9c9;
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.9),
    0 0 28px rgba(var(--accent-rgb), 0.45),
    0 0 42px rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
}

/* CMD prelude */
.landing-cmd-modal {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.landing-cmd-modal[hidden] {
  display: none !important;
}

.landing-cmd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 8, 0.78);
  backdrop-filter: blur(4px);
}

.landing-cmd-window {
  position: relative;
  width: min(520px, 100%);
  direction: ltr;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: #0a0c10;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 22px 70px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(var(--accent-rgb), 0.15);
  overflow: hidden;
  animation: landing-cmd-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes landing-cmd-pop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.landing-cmd-window__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #161822, #101218);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family:
    'JetBrains Mono',
    monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(200, 205, 220, 0.85);
}

.landing-cmd-window__dots {
  display: flex;
  gap: 5px;
}

.landing-cmd-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
}

.landing-cmd-window__dots span:nth-child(1) {
  background: #ff5f56;
}
.landing-cmd-window__dots span:nth-child(2) {
  background: #ffbd2e;
}
.landing-cmd-window__dots span:nth-child(3) {
  background: #27c93f;
}

.landing-cmd-window__title {
  flex: 1;
  text-align: center;
  letter-spacing: 0.06em;
}

.landing-cmd-stream {
  margin: 0;
  padding: 12px 14px 14px;
  height: min(320px, 48vh);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  font-family:
    'JetBrains Mono',
    monospace;
  font-size: 0.62rem;
  line-height: 1.42;
  color: rgba(110, 230, 156, 0.92);
  text-shadow: 0 0 8px rgba(80, 200, 120, 0.25);
  background: radial-gradient(ellipse at top, rgba(224, 49, 49, 0.07), transparent 55%), #06080c;
}

.landing-cmd-line {
  white-space: pre-wrap;
  word-break: break-all;
}

.landing-cmd-line--accent {
  color: rgba(255, 130, 130, 0.95);
}

/* Vision / duel modal */
.landing-vision-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.landing-vision-modal[hidden] {
  display: none !important;
}

.landing-vision-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.landing-vision-modal__dialog {
  position: relative;
  width: min(400px, 100%);
  direction: ltr;
  padding: 26px 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.48);
  background: linear-gradient(180deg, rgba(16, 14, 22, 0.96), rgba(8, 8, 14, 0.98));
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.15),
    0 28px 90px rgba(0, 0, 0, 0.65),
    0 0 70px rgba(var(--accent-rgb), 0.18);
  text-align: center;
  animation: landing-vision-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes landing-vision-pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.landing-vision-modal__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.45));
  margin-bottom: 8px;
}

.landing-swords-wrap {
  position: relative;
  height: 148px;
  margin: 10px 0 14px;
}

.landing-duel-stars {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 132px;
  height: 52px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.landing-duel-star {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: #ff3838;
  text-shadow:
    0 0 10px rgba(224, 49, 49, 1),
    0 0 24px rgba(255, 70, 70, 0.85),
    0 0 38px rgba(224, 49, 49, 0.55);
}

.landing-duel-star::before {
  content: '★';
}

.landing-duel-star:nth-child(1) {
  left: 4%;
  top: 58%;
  font-size: 10px;
}
.landing-duel-star:nth-child(2) {
  left: 22%;
  top: 18%;
  font-size: 13px;
}
.landing-duel-star:nth-child(3) {
  left: 42%;
  top: 4%;
  font-size: 15px;
}
.landing-duel-star:nth-child(4) {
  left: 62%;
  top: 16%;
  font-size: 13px;
}
.landing-duel-star:nth-child(5) {
  left: 78%;
  top: 52%;
  font-size: 11px;
}
.landing-duel-star:nth-child(6) {
  left: 48%;
  top: 72%;
  font-size: 9px;
}
.landing-duel-star:nth-child(7) {
  left: 34%;
  top: 38%;
  font-size: 11px;
}

.landing-vision-modal.is-sparking .landing-duel-stars {
  opacity: 1;
}

.landing-vision-modal.is-sparking .landing-duel-star {
  animation:
    landing-duel-star-pop 0.48s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    landing-duel-star-twinkle 0.55s ease-in-out infinite alternate;
}

.landing-vision-modal.is-sparking .landing-duel-star:nth-child(1) {
  animation-delay: 0s, 0.42s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(2) {
  animation-delay: 0.04s, 0.46s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(3) {
  animation-delay: 0.08s, 0.5s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(4) {
  animation-delay: 0.11s, 0.53s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(5) {
  animation-delay: 0.14s, 0.56s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(6) {
  animation-delay: 0.06s, 0.48s;
}
.landing-vision-modal.is-sparking .landing-duel-star:nth-child(7) {
  animation-delay: 0.1s, 0.52s;
}

@keyframes landing-duel-star-pop {
  from {
    opacity: 0;
    transform: scale(0.35) rotate(-22deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes landing-duel-star-twinkle {
  from {
    opacity: 0.75;
    filter: brightness(1);
  }
  to {
    opacity: 1;
    filter: brightness(1.25);
  }
}

.landing-swords {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.landing-swords svg {
  position: relative;
  width: 52px;
  height: 112px;
  overflow: visible;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45));
}

/* السيف / فوق السيف \ عند التقاطع (نفس مرجع الصورة) */
.landing-swords .landing-sword--a {
  z-index: 2;
  transform: translateX(-54px) rotate(-40deg);
}

.landing-swords .landing-sword--b {
  z-index: 1;
  transform: translateX(54px) rotate(40deg);
}

.landing-vision-modal.is-animate .landing-swords .landing-sword--a {
  animation: landing-sword-a 1.75s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

.landing-vision-modal.is-animate .landing-swords .landing-sword--b {
  animation: landing-sword-b 1.75s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}

/*
 * بداية: Λ عريضة (الطرفين لفوق زي المودال)، النهاية: X متصالب (~±42°)
 * السيف الأيسر يمر من سالب إلى موجب حتى يقطع نحو المركز — القديم كان يزيد السالب فقط فما كان يتشكل X.
 */
@keyframes landing-sword-a {
  0% {
    transform: translateX(-54px) rotate(-40deg);
  }
  38% {
    transform: translateX(-16px) rotate(-10deg);
  }
  52% {
    transform: translateX(6px) rotate(34deg);
  }
  72% {
    transform: translateX(9px) rotate(44deg);
  }
  100% {
    transform: translateX(8px) rotate(42deg);
  }
}

@keyframes landing-sword-b {
  0% {
    transform: translateX(54px) rotate(40deg);
  }
  38% {
    transform: translateX(16px) rotate(10deg);
  }
  52% {
    transform: translateX(-6px) rotate(-34deg);
  }
  72% {
    transform: translateX(-9px) rotate(-44deg);
  }
  100% {
    transform: translateX(-8px) rotate(-42deg);
  }
}

/* شرارة وسط التصادم (تحت النجوم، فوق السيوف) */
.landing-sparks {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 6;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.landing-sparks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px #fff,
    0 0 22px rgba(255, 80, 80, 0.95),
    0 0 36px rgba(224, 49, 49, 0.75);
}

.landing-sparks span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-28px);
}
.landing-sparks span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(72deg) translateY(-24px);
}
.landing-sparks span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(144deg) translateY(-26px);
}
.landing-sparks span:nth-child(4) {
  transform: translate(-50%, -50%) rotate(216deg) translateY(-22px);
}
.landing-sparks span:nth-child(5) {
  transform: translate(-50%, -50%) rotate(288deg) translateY(-30px);
}

.landing-vision-modal.is-sparking .landing-sparks {
  opacity: 1;
  animation: landing-spark-flash 0.35s ease-out forwards;
}

.landing-vision-modal.is-sparking .landing-sparks span {
  animation: landing-spark-twinkle 0.2s ease-in-out infinite alternate;
}

@keyframes landing-spark-flash {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes landing-spark-twinkle {
  from {
    opacity: 0.35;
    filter: blur(0.5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* اهتزاز كأن اتنين بيضغطوا على السيفين */
.landing-vision-modal.is-dueling .landing-swords-wrap {
  animation: landing-duel-shake 0.13s linear infinite;
}

@keyframes landing-duel-shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 1px) rotate(-0.4deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(0.5deg);
  }
  75% {
    transform: translate(-1px, -2px) rotate(-0.25deg);
  }
  100% {
    transform: translate(0, 0);
  }
}

.landing-vision-modal__tagline {
  margin: 0 0 18px;
  font-size: clamp(0.92rem, 2.6vw, 1.05rem);
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 236, 236, 0.92);
  text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
}

html[lang='ar'] .landing-vision-modal__tagline {
  direction: rtl;
}

html[lang='ar'] .landing-vision-modal__close {
  direction: rtl;
}

.landing-vision-modal__close {
  width: 100%;
  margin: 0;
}

@media (max-height: 720px) {
  .landing-body .landing-main:has(.login-card--register) {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .landing-body .landing-main:has(.login-card--register) > .login-card {
    margin-top: 45px;
  }

  .landing-code-col--left {
    transform: translateY(clamp(26px, 6vh, 88px));
  }

  .landing-code-col--right {
    transform: translateY(clamp(26px, 6vh, 88px));
  }

  .landing-body .landing-main:has(.login-card--register) .landing-code-col--left {
    transform: translateY(clamp(22px, 4.5vh, 72px));
  }

  .landing-body .landing-main:has(.login-card--register) .landing-code-col--right {
    transform: translateY(clamp(22px, 4.5vh, 72px));
  }

  .landing-code-board {
    max-height: min(28vh, 268px);
  }
}

@media (max-width: 1080px) {
  .landing-code-col {
    display: none !important;
  }

  .landing-body .landing-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-code-col {
    transition: none;
  }

  .landing-code-board__tilt {
    transition: none;
    transform: none !important;
  }

  .landing-cmd-window {
    animation: none;
  }

  .landing-vision-modal__dialog {
    animation: none;
  }

  .landing-vision-modal.is-animate .landing-swords .landing-sword--a {
    animation: none;
    transform: translateX(8px) rotate(42deg);
  }

  .landing-vision-modal.is-animate .landing-swords .landing-sword--b {
    animation: none;
    transform: translateX(-8px) rotate(-42deg);
  }

  .landing-vision-modal.is-dueling .landing-swords-wrap {
    animation: none;
  }

  .landing-sparks span {
    animation: none !important;
  }

  .landing-duel-star {
    animation: none !important;
  }
}