/* ============================================================
   Color Quest - site stylesheet
   RTL-safe: all layout uses logical properties / flex / grid.
   ============================================================ */
:root {
  --bg1: #2b1a5e;
  --bg2: #0f0530;
  --card: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.14);
  --ink: #ffffff;
  --ink-dim: #cfc6ee;
  --accent: #ffd93d;
  --accent2: #ff6d8d;
  --accent3: #43e9e0;
  --accent4: #43aa8b;
  --btn: linear-gradient(135deg, #ff9f1c, #f72585);
  --radius: 22px;
  --font: "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans Bengali",
          "Noto Sans Devanagari", "Noto Sans JP", "Noto Sans SC", system-ui,
          sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, #5f2eea55, transparent 60%),
    radial-gradient(900px 500px at 10% 20%, #f7258533, transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent3); }

/* ---------- header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(15, 5, 48, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 42px; height: 42px; }
.brand b { font-size: 1.15rem; color: var(--ink); }
nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
nav a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
}
nav a:hover { color: var(--ink); background: var(--card); }

/* ---------- language picker ---------- */
.lang-wrap { position: relative; }
#langBtn {
  display: flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}
#langBtn:hover { background: rgba(255,255,255,0.16); }
#langMenu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: 230px;
  max-height: 60vh;
  overflow-y: auto;
  background: #241455;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 6px;
  display: none;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
#langMenu.open { display: block; }
#langMenu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 9px;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
}
#langMenu button:hover { background: rgba(255,255,255,0.12); }
#langMenu button.active { background: rgba(67,233,224,0.18); color: var(--accent3); }
#langMenu .flag { font-size: 1.15rem; }

/* ---------- hero ---------- */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 20px 30px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 36px; }
  .hero .cta-row, .hero .pill-row { justify-content: center; }
}
.hero-logo {
  width: min(380px, 78vw);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 14px;
}
.hero h1 .rainbow {
  background: linear-gradient(90deg,#f94144,#f8961e,#f9c74f,#43aa8b,#3a86ff,#b5179e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.sub { color: var(--ink-dim); font-size: 1.12rem; max-width: 46ch; }
@media (max-width: 780px) { .hero p.sub { margin-inline: auto; } }

.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 7px 15px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.pill.price { background: linear-gradient(135deg,#f8961e33,#f7258533); border-color: #f8961e66; color: var(--accent); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn.primary { background: var(--btn); box-shadow: 0 10px 26px rgba(247,37,133,0.4); }
.btn.ghost { background: var(--card); border: 1px solid var(--card-border); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(247,37,133,0.55); }
.btn.ghost:hover { transform: translateY(-2px); }
.btn svg { width: 22px; height: 22px; }
/* store-status tag on a CTA button (SOON / AVAILABLE) */
.btn { position: relative; }
.btn .tag {
  position: absolute; top: -9px; inset-inline-end: -7px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px; line-height: 1;
}
.btn .tag.soon  { background: #ffd166; color: #4a3200; }
.btn .tag.avail { background: #4ade80; color: #052e12; }

/* ---------- sections ---------- */
section { max-width: 1080px; margin: 0 auto; padding: 44px 20px; }
h2.section-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 8px; }
p.section-sub { color: var(--ink-dim); margin-bottom: 26px; max-width: 60ch; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform 0.18s ease, background 0.18s ease;
}
.card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.13); }
.card .emoji { font-size: 2rem; display: block; margin-bottom: 10px; }
.card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.card p { color: var(--ink-dim); font-size: 0.95rem; }

/* game chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* parents strip */
.parents {
  background: linear-gradient(135deg, rgba(67,170,139,0.18), rgba(58,134,255,0.14));
  border: 1px solid rgba(67,233,224,0.3);
  border-radius: var(--radius);
  padding: 28px;
}
.parents ul { margin-inline-start: 1.3em; color: var(--ink-dim); }
.parents li { margin: 4px 0; }

/* ---------- faq / text pages ---------- */
.page { max-width: 780px; margin: 0 auto; padding: 46px 20px 70px; }
.page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.page h2 { font-size: 1.25rem; margin: 30px 0 8px; color: var(--accent); }
.page p, .page li { color: var(--ink-dim); margin-bottom: 10px; }
.page ul { margin-inline-start: 1.3em; }
.page a.back { display: inline-block; margin-top: 34px; color: var(--ink-dim); text-decoration: none; }
.page a.back:hover { color: var(--ink); }
.faq-item { margin-bottom: 22px; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: 5px; color: var(--ink); }
.contact-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 20px 0 10px;
}
.contact-box a { font-size: 1.15rem; font-weight: 700; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--card-border);
  padding: 26px 20px 40px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.92rem;
}
footer .flinks { display: flex; gap: 22px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
footer .flinks a { color: var(--ink); text-decoration: none; font-weight: 600; }
footer .flinks a:hover { color: var(--accent3); }

/* small screens */
@media (max-width: 560px) {
  nav a { padding: 7px 10px; font-size: 0.88rem; }
  .brand b { font-size: 1rem; }
  .btn { width: 100%; justify-content: center; }
}