/* ── Joc Memorie — stiluri plugin WordPress ───────────────
   Toate clasele sunt prefixate cu .joc-memo-wrap pentru
   a evita conflictele cu tema activă.
   ────────────────────────────────────────────────────── */

.joc-memo-wrap *,
.joc-memo-wrap *::before,
.joc-memo-wrap *::after { box-sizing: border-box; }

/* Wrapper principal — centrat vertical în pagina temei */
.joc-memo-wrap {
  width: 100%;
  min-height: 92vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  font-family: system-ui, -apple-system, sans-serif;
  /* Creează stacking context deasupra elementelor flotante ale temei
     (bare membership, meniuri sticky etc.). Sidebar-ul și overlay-ul
     jocului sunt ÎNĂUNTRUL acestui context, deci apar corect deasupra cardului. */
  position: relative;
  z-index: 100001;
}

/* ── Container fullscreen ────────────────────────────── */
.jm-fullscreen-root {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ── Fullscreen via element (.jm-fullscreen-root) ───────
   REGULĂ SEPARATĂ per prefix — gruparea cu virgulă face
   browser-ul să arunce întreaga regulă dacă nu cunoaşte
   unul din prefixe.
   ─────────────────────────────────────────────────────── */
/* Backdrop — regulă separată, nu grupată */
.jm-fullscreen-root::backdrop         { background: #f0f4f8; }
.jm-fullscreen-root::-webkit-backdrop { background: #f0f4f8; }

/* ── ATENȚIE: selectoarele :fullscreen NU se grupează cu virgulă!
   Un prefix necunoscut (ex. -moz în Chrome) face browser-ul să arunce
   ÎNTREAGA regulă, inclusiv :fullscreen standard. Deci: câte o regulă per prefix. */

/* Fundalul containerului în fullscreen */
.jm-fullscreen-root:fullscreen          { background: #f0f4f8; }
.jm-fullscreen-root:-webkit-full-screen { background: #f0f4f8; }
.jm-fullscreen-root:-moz-full-screen    { background: #f0f4f8; }

/* Card centrat absolut în fullscreen — câte o regulă per prefix */
.jm-fullscreen-root:fullscreen .jm-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 96vw); max-width: min(820px, 96vw);
  height: 96vh; max-height: 96vh;
  border-radius: .75rem;
}
.jm-fullscreen-root:-webkit-full-screen .jm-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 96vw); max-width: min(820px, 96vw);
  height: 96vh; max-height: 96vh;
  border-radius: .75rem;
}
.jm-fullscreen-root:-moz-full-screen .jm-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 96vw); max-width: min(820px, 96vw);
  height: 96vh; max-height: 96vh;
  border-radius: .75rem;
}

/* ── Card principal ──────────────────────────────────── */
.joc-memo-wrap .jm-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(74,128,21,.16), 0 2px 8px rgba(0,0,0,.08);
  width: 100%; max-width: 820px;
  height: 90vh; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Bara de titlu ───────────────────────────────────── */
.joc-memo-wrap .game-title-bar {
  position: relative;
  padding: .9rem 3.2rem;
  background: linear-gradient(165deg, #85c43a 0%, #6aaa22 45%, #4a8015 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.12);
  text-align: center;
}
.joc-memo-wrap .game-title-bar h1 {
  color: #fff; margin: 0;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 1px 0 #2d5a0b, 0 2px 0 #1e3d07, 0 3px 5px rgba(0,0,0,.35);
}

.joc-memo-wrap #fsToggle,
.joc-memo-wrap #cfgToggle {
  position: absolute; top: 50%;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.38);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  padding: 0;
}
.joc-memo-wrap #fsToggle  { left: 14px;  transform: translateY(-50%); }
.joc-memo-wrap #cfgToggle { right: 14px; transform: translateY(-50%); font-size: 1.15rem; }
.joc-memo-wrap #fsToggle:hover   { background: rgba(255,255,255,.30); transform: translateY(-50%) scale(1.1); }
.joc-memo-wrap #cfgToggle:hover  { background: rgba(255,255,255,.30); transform: translateY(-50%) scale(1.1); }
.joc-memo-wrap #cfgToggle.active { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* ── Statistici ──────────────────────────────────────── */
.joc-memo-wrap .jm-stats-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 1.25rem;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  font-size: .82rem; color: #64748b;
}
.joc-memo-wrap .jm-stats-bar strong { color: #6aaa22; font-weight: 700; }

/* ── Zone de joc ─────────────────────────────────────── */
.joc-memo-wrap .game-body {
  flex: 1; min-height: 0;
  padding: .75rem;
  display: flex; align-items: center; justify-content: center;
}

.joc-memo-wrap .card-wrapper {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

.joc-memo-wrap .memo-grid {
  display: grid;
  gap: .45rem;
}

/* ── Celule ──────────────────────────────────────────── */
.joc-memo-wrap .memo-cell {
  perspective: 700px;
  cursor: pointer;
  user-select: none;
}
.joc-memo-wrap .memo-cell.empty { cursor: default; visibility: hidden; }

.joc-memo-wrap .memo-cell-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  border-radius: .45rem;
}
.joc-memo-wrap .memo-cell.flipped .memo-cell-inner,
.joc-memo-wrap .memo-cell.matched .memo-cell-inner { transform: rotateY(180deg); }

.joc-memo-wrap .memo-face,
.joc-memo-wrap .memo-back {
  position: absolute; inset: 0;
  border-radius: .45rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.joc-memo-wrap .memo-back {
  background: linear-gradient(135deg, #6aaa22 0%, #4a8015 100%);
  border: 2px solid #85c43a;
  display: flex; align-items: center; justify-content: center;
}
.joc-memo-wrap .memo-back-inner {
  width: 62%; height: 62%;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: .3rem;
  display: flex; align-items: center; justify-content: center;
}
.joc-memo-wrap .memo-back-inner svg { opacity: .35; }

.joc-memo-wrap .memo-face {
  transform: rotateY(180deg);
  background: #fff;
  border: 2px solid #e2e8f0;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.joc-memo-wrap .memo-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.joc-memo-wrap .memo-cell.matched .memo-face {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px #dcfce7 inset;
}

.joc-memo-wrap .memo-cell:not(.flipped):not(.matched):not(.empty):hover .memo-back {
  border-color: #a3d075;
  background: linear-gradient(135deg, #85c43a 0%, #6aaa22 100%);
}

/* ── Overlay & sidebar (position:fixed — nu necesită prefix) */
#jm-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.35);
  z-index: 99200; opacity: 0; pointer-events: none; transition: opacity .28s;
}
#jm-overlay.open { opacity: 1; pointer-events: all; }

#jm-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 100vw; background: #fff;
  box-shadow: -6px 0 30px rgba(0,0,0,.13); z-index: 99300;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#jm-sidebar.open { transform: translateX(0); }

.jm-sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.jm-sb-header h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0; }
.jm-sb-close {
  width: 2rem; height: 2rem; border: none; background: #f1f5f9;
  border-radius: .4rem; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; color: #475569;
}
.jm-sb-close:hover { background: #e2e8f0; }

.jm-sb-body {
  flex: 1; padding: 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  overflow-y: auto;
}

.jm-sb-section-title {
  font-size: .7rem; font-weight: 700; color: #94a3b8;
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: -.6rem;
}

.jm-sb-field {
  display: flex; flex-direction: column; gap: .55rem;
  align-items: stretch; /* tema poate seta flex-start și comprima itemii */
  width: 100%;
}
/* Specificitate mai mare (.jm-sb-body .jm-sb-field label) pentru a bate stilurile temei */
.jm-sb-body .jm-sb-field label {
  display: block;       /* tema poate forța inline/inline-block */
  width: 100%;
  font-size: .85rem; font-weight: 600; color: #334155;
  margin: 0; padding: 0; /* resetăm orice margin/padding injectat de temă */
}

.jm-select {
  width: 100%; padding: .55rem .75rem;
  border: 1.5px solid #e2e8f0; border-radius: .5rem;
  font-size: .95rem; font-weight: 600; color: #1e293b;
  background: #fff; cursor: pointer; outline: none;
  transition: border-color .15s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236aaa22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}
.jm-select:focus { border-color: #6aaa22; }
.jm-select option { font-weight: 600; }

.jm-switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.jm-switch-label { font-size: .85rem; font-weight: 600; color: #334155; }
.jm-toggle { position: relative; width: 2.5rem; height: 1.4rem; flex-shrink: 0; }
.jm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.jm-toggle-thumb {
  position: absolute; inset: 0;
  background: #e2e8f0; border-radius: 999px; cursor: pointer;
  transition: background .2s;
}
.jm-toggle-thumb::before {
  content: ''; position: absolute;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: #fff; left: .2rem; top: .2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .2s;
}
.jm-toggle input:checked + .jm-toggle-thumb { background: #6aaa22; }
.jm-toggle input:checked + .jm-toggle-thumb::before { transform: translateX(1.1rem); }

.jm-sb-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0; }

.jm-sb-info {
  font-size: .78rem; color: #64748b; line-height: 1.55;
  background: #f8fafc; border-radius: .4rem; padding: .55rem .75rem;
  border-left: 3px solid #c3e6a3;
}
.jm-sb-info b { color: #4a8015; }

.jm-btn-new-game {
  padding: .75rem;
  background: #6aaa22; color: #fff;
  border: none; border-radius: .5rem;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .1s;
  text-align: center; width: 100%;
}
.jm-btn-new-game:hover { opacity: .88; }
.jm-btn-new-game:active { transform: scale(.97); }

/* ── Lightbox „Arată imaginea" ──────────────────────── */
#jm-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99500;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .9rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  cursor: pointer;
  user-select: none;
}
#jm-lightbox.show { opacity: 1; pointer-events: all; }

#jm-lightbox-img {
  max-height: 80vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: .75rem;
  box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.4);
  display: block;
  transform: scale(.88);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
#jm-lightbox.show #jm-lightbox-img { transform: scale(1); }

#jm-lightbox-hint {
  color: rgba(255,255,255,.62);
  font-size: .78rem; letter-spacing: .05em;
  pointer-events: none;
}

/* ── Win overlay ─────────────────────────────────────── */
.joc-memo-wrap .win-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem; border-radius: .6rem;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.joc-memo-wrap .win-overlay.show { opacity: 1; pointer-events: all; }
.joc-memo-wrap .win-emoji { font-size: 3rem; line-height: 1; }
.joc-memo-wrap .win-overlay h2 { font-size: 1.5rem; font-weight: 800; color: #1e293b; margin: 0; }
.joc-memo-wrap .win-overlay p  { color: #64748b; font-size: .9rem; text-align: center; max-width: 26ch; margin: 0; }
.joc-memo-wrap .btn-win {
  padding: .65rem 1.6rem; border: none; border-radius: .5rem;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  background: #6aaa22; color: #fff;
  transition: opacity .15s, transform .1s;
  margin-top: .25rem;
}
.joc-memo-wrap .btn-win:hover { opacity: .88; }
.joc-memo-wrap .btn-win:active { transform: scale(.97); }