/* =========================================================================
   PlatoPrint — "Limba Fulger" — stylesheet
   Tot ce urmează e prefixat cu #plato-game ca să nu se ciocnească
   cu stilurile temei existente a site-ului, indiferent unde e injectat.
   ========================================================================= */

#plato-game {
  /* ---- Paleta de brand PlatoPrint (identică cu tokenii din styles.css al site-ului) ---- */
  --fg-brand: #6FA057;        /* verde cameleon — primar / CTA */
  --fg-brand-dark: #4c7a3c;   /* verde mai închis, pt. adâncimea butoanelor */
  --fg-teal: #3D8F87;         /* teal — secundar, folosit la accente UI */
  --fg-teal-dark: #1E3B3B;    /* teal închis — text/ink, ca pe site */
  --fg-aqua: #5BAFC0;         /* aqua — highlight-uri, glow bonus */
  --fg-mint: #E4F3EC;         /* mint pal — fundaluri deschise */
  --fg-ivory: #FAFDFB;        /* ivoriu — fundal principal */
  --fg-danger: #e15c4f;       /* roșu de avertizare — doar pt. ratări/viespi, nu apare în brand */
  --fg-gold: #f2c14e;         /* auriu festiv — doar pt. confetti/combo/reducere */

  /* ---- Alias-uri interne (compatibilitate cu restul foii de stil) ---- */
  --fg-brand-darker: var(--fg-teal-dark);
  --fg-ink: var(--fg-teal-dark);
  --fg-ink-soft: rgba(30, 59, 59, 0.62);
  --fg-cream: var(--fg-ivory);
  --fg-brand-pale: var(--fg-mint);
  --fg-accent: var(--fg-teal);
  --fg-accent-dark: #2c6b64;

  --fg-radius-lg: 28px;
  --fg-radius-md: 18px;
  --fg-radius-sm: 12px;
  --fg-shadow: 0 14px 36px rgba(30, 59, 59, 0.14);

  position: relative;
  max-width: 460px;
  margin: 0 auto;
  /* Dacă jocul e injectat pe platoprint.com, site-ul deja încarcă aceste
     fonturi (Google Fonts) — le preluăm gratis, altfel cădem pe stack-ul
     de sistem, fără niciun apel extern nou făcut de joc. */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Segoe UI Emoji", "Noto Color Emoji",
               "Apple Color Emoji", sans-serif;
  color: var(--fg-teal-dark);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  isolation: isolate;
}

#plato-game * { box-sizing: border-box; }

/* Garantăm că [hidden] câștigă mereu în fața oricărei reguli display:flex/block
   de mai jos (altfel specificitatea claselor le-ar putea anula efectul). */
#plato-game [hidden] { display: none !important; }

#plato-game .fg-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--fg-radius-lg);
  z-index: 0;
}

#plato-game .fg-card {
  position: relative;
  z-index: 1;
  border-radius: var(--fg-radius-lg);
  overflow: hidden;
  box-shadow: var(--fg-shadow);
  background: linear-gradient(180deg, var(--fg-cream) 0%, var(--fg-brand-pale) 100%);
  border: 1px solid rgba(111, 160, 87, 0.25);
}

/* ---------------------------- Ecrane generice ---------------------------- */

#plato-game .fg-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 32px;
  min-height: 640px;
  text-align: center;
}

#plato-game .fg-screen--game {
  padding: 0;
  min-height: 0;
}

#plato-game .fg-h2 {
  margin: 4px 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-brand-darker);
}

/* ------------------------------ Ecran start ------------------------------ */

#plato-game .fg-logo-wrap { margin-top: 8px; }

#plato-game .fg-mascot-badge {
  width: 100px;
  height: 100px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, var(--fg-brand-pale) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(111, 160, 87, 0.35);
  animation: fg-bob 3.2s ease-in-out infinite;
}

@keyframes fg-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-3deg); }
}

#plato-game .fg-title {
  margin: 6px 0 2px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--fg-brand-darker);
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}

#plato-game .fg-subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--fg-ink-soft);
  font-weight: 600;
}

#plato-game .fg-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-ink);
  max-width: 320px;
  margin: 0 0 26px;
}

#plato-game .fg-highscore-line {
  margin-top: 18px;
  font-size: 14px;
  color: var(--fg-ink-soft);
}
#plato-game .fg-highscore-line strong { color: var(--fg-brand-darker); }

/* -------------------------------- Butoane -------------------------------- */

#plato-game .fg-btn {
  font-family: inherit;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
#plato-game .fg-btn:active { transform: scale(0.96); }

#plato-game .fg-btn--primary {
  background: linear-gradient(180deg, var(--fg-brand) 0%, var(--fg-brand-dark) 100%);
  color: #fff;
  padding: 14px 30px;
  font-size: 16px;
  box-shadow: 0 6px 0 var(--fg-brand-darker), 0 10px 18px rgba(76, 122, 60, 0.35);
}
#plato-game .fg-btn--primary:hover { filter: brightness(1.05); }
#plato-game .fg-btn--primary:active {
  box-shadow: 0 2px 0 var(--fg-brand-darker), 0 4px 10px rgba(76, 122, 60, 0.35);
  transform: translateY(4px) scale(0.98);
}

#plato-game .fg-btn--big { padding: 17px 44px; font-size: 19px; margin-bottom: 14px; }

#plato-game .fg-btn--ghost {
  background: transparent;
  color: var(--fg-brand-darker);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#plato-game .fg-btn--copy {
  background: var(--fg-accent);
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: 0 4px 0 var(--fg-accent-dark);
  white-space: nowrap;
}
#plato-game .fg-btn--copy:active {
  box-shadow: 0 1px 0 var(--fg-accent-dark);
  transform: translateY(3px) scale(0.98);
}

/* ------------------------------- How-to ------------------------------- */

#plato-game .fg-rules {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  max-width: 320px;
}
#plato-game .fg-rules li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(111,160,87,0.35);
}
#plato-game .fg-rules li:last-child { border-bottom: none; }

/* --------------------------------- HUD --------------------------------- */

#plato-game .fg-screen--game {
  display: block;
}

#plato-game .fg-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  pointer-events: none;
}

#plato-game .fg-hud-block {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border-radius: var(--fg-radius-sm);
  padding: 6px 14px;
  box-shadow: 0 3px 10px rgba(44,59,38,0.15);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

#plato-game .fg-hud-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-ink-soft);
  font-weight: 700;
}

#plato-game .fg-hud-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--fg-brand-darker);
}

#plato-game .fg-hud-block--combo {
  background: linear-gradient(180deg, var(--fg-gold), var(--fg-accent));
  animation: fg-combo-pop 0.25s ease;
}
#plato-game .fg-hud-combo {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@keyframes fg-combo-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

#plato-game .fg-hud-lives {
  flex-direction: row;
  gap: 3px;
  font-size: 17px;
}
#plato-game .fg-hud-lives .fg-life-lost { opacity: 0.25; filter: grayscale(1); }

#plato-game .fg-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 640;
  touch-action: none;
  cursor: crosshair;
}

/* ----------------------------- Game over ----------------------------- */

#plato-game .fg-score-summary {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#plato-game .fg-score-block {
  background: #fff;
  border-radius: var(--fg-radius-sm);
  padding: 12px 18px;
  min-width: 100px;
  box-shadow: 0 4px 12px rgba(44,59,38,0.1);
}

#plato-game .fg-score-block--best {
  background: linear-gradient(180deg, #fff7e0, #ffedb3);
  display: flex;
  align-items: center;
  justify-content: center;
}
#plato-game .fg-score-block--best .fg-hud-label { color: var(--fg-accent-dark); font-size: 13px; }

#plato-game .fg-score-big {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--fg-brand-darker);
}
#plato-game .fg-score-mid {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--fg-ink-soft);
}

#plato-game .fg-discount-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 340px;
  background: linear-gradient(160deg, #fff 0%, var(--fg-brand-pale) 100%);
  border: 2px dashed var(--fg-brand);
  border-radius: var(--fg-radius-md);
  padding: 18px 16px 20px;
  margin-bottom: 20px;
}

#plato-game .fg-discount-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 900;
  color: var(--fg-brand-darker);
}

#plato-game .fg-discount-percent {
  margin: 0 0 8px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: var(--fg-accent-dark);
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}
#plato-game .fg-discount-percent.fg-discount-percent--free {
  color: var(--fg-brand-darker);
  font-size: 26px;
}

#plato-game .fg-discount-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--fg-ink-soft);
}

#plato-game .fg-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#plato-game .fg-code {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  background: var(--fg-ink);
  color: #fffbe8;
  padding: 8px 16px;
  border-radius: var(--fg-radius-sm);
}

#plato-game .fg-copy-feedback {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-brand-darker);
}

#plato-game .fg-btn--whatsapp {
  display: inline-block;
  margin-top: 14px;
  background: #25D366; /* verde oficial WhatsApp — recognoscibil ca acțiune, nu culoare de brand PlatoPrint */
  color: #fff;
  padding: 11px 22px;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 0 #1aa34e;
}
#plato-game .fg-btn--whatsapp:active {
  box-shadow: 0 1px 0 #1aa34e;
  transform: translateY(3px) scale(0.98);
}

#plato-game .fg-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#plato-game .fg-confetti span {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  animation: fg-confetti-fall linear forwards;
}
@keyframes fg-confetti-fall {
  to { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

#plato-game .fg-encourage-card {
  width: 100%;
  max-width: 340px;
  background: var(--fg-mint);
  border: 2px dashed var(--fg-teal);
  border-radius: var(--fg-radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
}

#plato-game .fg-encourage-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-teal-dark);
}
#plato-game .fg-encourage-text strong { color: var(--fg-brand-darker); }

#plato-game .fg-rules-mini {
  max-width: 320px;
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-ink-soft);
}

#plato-game .fg-over-actions {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#plato-game .fg-btn--site {
  display: inline-block;
  background: transparent;
  color: var(--fg-teal);
  border: 2px solid var(--fg-teal);
  padding: 10px 24px;
  font-size: 14px;
  text-decoration: none;
}
#plato-game .fg-btn--site:active { transform: scale(0.96); }

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 380px) {
  #plato-game .fg-title { font-size: 28px; }
  #plato-game .fg-screen { padding: 22px 16px 26px; min-height: 560px; }
  #plato-game .fg-code { font-size: 19px; }
}

@media (min-width: 700px) {
  #plato-game { max-width: 420px; }
}