/* =============================================================
   Pagina de start (index.html). Pagina de joc are fișierul ei: css/joc.css
   ============================================================= */

/* ===== Culorile site-ului (le schimbi aici, o singură dată) ===== */
:root {
  /* Paleta Rapdle: negru curat, galben și alb */
  --bg: #070707;        /* fundal */
  --text: #ffffff;      /* text principal */
  --muted: #a6a6a6;     /* text secundar */
  --accent: #ffd400;    /* galben */
  --accent-2: #ffffff;  /* alb (umbra butonului, egalizatorul) */
  --accent-fg: #0a0a0a; /* textul de pe butonul galben */
  --glow-1: rgba(255, 212, 0, 0.16);   /* luminile discrete din fundal */
  --glow-2: rgba(255, 255, 255, 0.05);
  --linie: rgba(255, 255, 255, 0.15);  /* margini discrete */
  --btn-bg: var(--accent);             /* butonul principal */
  --logo-umbra: #5c4c00;               /* umbra logo-ului: galben închis */
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* Lumini colorate discrete în fundal */
  background-image:
    radial-gradient(circle at 15% 10%, var(--glow-1), transparent 45%),
    radial-gradient(circle at 85% 90%, var(--glow-2), transparent 45%);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
}

/* ===== Zona principală ===== */
.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  gap: 28px;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--linie);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ===== Logo-ul (numele e în js/marca.js: „wRAP-UP!”) ===== */
.logo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(4.5rem, 22vw, 9rem); /* se micșorează pe telefon */
  line-height: 0.9;
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
  text-shadow: 4px 4px 0 var(--logo-umbra);
}

.logo span {
  color: var(--accent);
}

/* Bucățile logo-ului (js/marca.js): <small> = litera mică „w” (Bebas Neue are doar majuscule), <b> = text normal */
.logo small, .logo-mic small { font-size: 0.72em; letter-spacing: 0.02em; }
.logo b, .logo-mic b { font-weight: inherit; }

/* ===== Iconițele (js/iconite.js, setul Lucide): aceeași mărime și grosime peste tot, culoarea textului din jur ===== */
.iconita {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
  stroke-width: 2;
}

/* ===== Egalizator animat ===== */
.eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
  margin: 8px 0;
}

.eq span {
  width: 6px;
  height: 100%;
  background: linear-gradient(to top, var(--accent-2), var(--accent));
  border-radius: 3px;
  transform-origin: bottom;
  animation: bounce 1s ease-in-out infinite;
}

.eq span:nth-child(2) { animation-delay: 0.15s; }
.eq span:nth-child(3) { animation-delay: 0.3s; }
.eq span:nth-child(4) { animation-delay: 0.45s; }
.eq span:nth-child(5) { animation-delay: 0.2s; }
.eq span:nth-child(6) { animation-delay: 0.35s; }
.eq span:nth-child(7) { animation-delay: 0.05s; }

@keyframes bounce {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* ===== Butonul ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  padding: 18px 24px;
  background: var(--btn-bg);
  color: var(--accent-fg);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--accent-2);
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--accent-2);
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--accent-2);
}

.btn:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

.btn-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--accent-fg);
  color: var(--accent);
  border-radius: 50%;
  font-size: 0.8rem;
}

/* Pentru cei care preferă fără animații */
@media (prefers-reduced-motion: reduce) {
  .eq span { animation: none; transform: scaleY(0.6); }
}


/* =============================================================
   Meniul jocurilor (js/jocuri.js): cardurile mari de pe pagina principală,
   meniul mic de sus și „Încearcă și celelalte jocuri” de jos, pe paginile de joc.
   Culorile vin din variabilele paginii (pe paginile de joc, din tema activă).
   ============================================================= */
:root {
  --suprafata-card: var(--surface, #141414);
  --margine-card: var(--border, rgba(255, 255, 255, 0.1));
}

.joc-iconita {
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eticheta-curand {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font: 700 0.65rem "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ----- Cardurile mari (pagina principală) ----- */
.carduri-jocuri {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 760px) {
  .carduri-jocuri { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

.card-joc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  text-align: left;
  background: var(--suprafata-card);
  border: 1px solid var(--margine-card);
  border-radius: 18px;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.card-joc:hover { border-color: var(--accent); }
.card-joc h2 { font: 400 1.9rem/1 "Bebas Neue", Impact, sans-serif; letter-spacing: 0.04em; }
.card-joc p { color: var(--muted); font-size: 0.95rem; line-height: 1.45; flex: 1; }
.card-curand { opacity: 0.6; }
.card-curand:hover { border-color: var(--margine-card); }

.btn.btn-joc {
  max-width: none;
  width: auto;
  padding: 12px 26px;
  margin-top: 4px;
  font-size: 1.3rem;
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--accent-2);
}

.btn.btn-joc.btn-inactiv {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ----- Meniul mic de sus, pe paginile de joc ----- */
.meniu-jocuri {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.meniu-link {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--muted);
  font: 600 0.72rem "Inter", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a.meniu-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.meniu-link.activ { color: var(--accent); background: rgba(255, 255, 255, 0.07); }
.meniu-link.inactiv { opacity: 0.45; cursor: default; }

.logo-link { text-decoration: none; flex: none; }

/* ----- „Încearcă și celelalte jocuri” (jos, pe paginile de joc) ----- */
.alte-jocuri {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--margine-card);
  text-align: left;
}

.alte-jocuri h2 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.carduri-mici { display: grid; grid-template-columns: 1fr; gap: 10px; }

.card-mic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--suprafata-card);
  border: 1px solid var(--margine-card);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.12s ease;
}

a.card-mic:hover { border-color: var(--accent); }
a.card-mic:active { transform: scale(0.98); }
.card-mic-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-mic-text strong { font-size: 0.95rem; }
.card-mic-text small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.card-mic .eticheta-curand { margin: 2px 0 0; align-self: flex-start; }