/* ========== Memory Game – scoped ========== */
.memory-game {
  /* design tokens solo per il gioco */
  --bg:#0f172a;
  --panel:#111827cc;
  --card:#111827;
  --card-hover:#1f2937;
  --accent:#22c55e;
  --accent-2:#60a5fa;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --danger:#ef4444;
  --success:#10b981;
  --stage-bg:rgba(2,6,23,0.35);

  color: var(--text);
  padding: 24px;
  box-sizing: border-box;
}

/* app container */
.memory-game .app{
  width:min(1100px,100%);
  margin:0 auto;
  display:grid;
  gap:16px;
  grid-template-rows:auto auto 1fr auto;
}

/* header/logo — scopo solo qui */
.memory-game header.game-header{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:center;
      justify-content:center;
  -ms-flex-align:center;
      align-items:center;
  padding:8px 0 6px;
}
.memory-game .brand-logo{
  height:clamp(36px, 6vw, 64px);
  width:auto;
  object-fit:contain;
}

/* pannelli e timer */
.memory-game .board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--board-gap,200px);
  min-height:440px;
}
.memory-game .column{
  background:var(--panel);
  border:1px solid #1f2937;
  border-radius:16px;
  padding:14px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
}
.memory-game .column h2{
  font-size:1rem;
  margin:0;
  color:var(--muted);
  letter-spacing:.2px;
  font-weight:700;
}
.memory-game .cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.memory-game .hud{
  display:grid;
  place-items:center;
  margin-top:10px;
}
.memory-game .timer{
  display:-ms-inline-flexbox;
  display:inline-flex;
  -ms-flex-align:baseline;
      align-items:baseline;
  gap:10px;
  padding:8px 14px;
  border-radius:14px;
  background:rgba(17,24,39,.65);
  border:1px solid #1f2937;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.memory-game .timer .label{ color:var(--muted); font-weight:700; letter-spacing:.2px; }
.memory-game .timer .value{ font-weight:900; font-size:clamp(20px,4.2vw,34px); line-height:1; }

/* card */
.memory-game .card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:0;
  aspect-ratio:155/221;
  display:block;
  cursor:pointer;
  transition:border-color .15s ease, transform .1s ease, box-shadow .2s ease;
  -webkit-user-select:none;
      -ms-user-select:none;
          user-select:none;
  outline:none;
  perspective:900px;
  position:relative;
  overflow:hidden;
}
.memory-game .card:hover{ background:var(--card-hover); }
.memory-game .card:focus-visible{ box-shadow:0 0 0 2px var(--accent-2) inset; }

.memory-game .card .inner{
  position:relative;
  width:100%; height:100%;
  border-radius:inherit;
  transform-style:preserve-3d;
  transition:transform .5s;
}
.memory-game .card.is-flipped .inner{ transform:rotateY(180deg); }

.memory-game .face{
  position:absolute; inset:0;
  border-radius:inherit;
  backface-visibility:hidden;
  display:grid; place-items:center;
  padding:0;
}
.memory-game .face.front{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  border:none;
}
/* retro standard (sostituisci i path se diversi) */
.memory-game .card[data-type="q"] .face.front{ background-image:url("../images/question.png"); }
.memory-game .card[data-type="a"] .face.front{ background-image:url("../images/answer.png"); }

.memory-game .face.back{
  background:var(--card);
  transform:rotateY(180deg);
  color:var(--text);
  border:1px solid #1f2937;
  display:grid; place-items:center;
  padding:6px;
}
.memory-game .face.back img{ width:100%; height:100%; object-fit:contain; display:block; }

.memory-game .card[data-state="selected"]{
  border-color:var(--accent-2);
  box-shadow:0 0 0 2px var(--accent-2) inset;
  -ms-transform:translateY(-1px);
      transform:translateY(-1px);
}
.memory-game .card[data-state="matched"]{ cursor:default; }
.memory-game .card[data-state="matched"]::after{
  content:"✓";
  position:absolute; top:8px; right:10px;
  color:var(--success); font-weight:900; z-index:3;
}

/* overlay stage */
.memory-game #stage{
  position:fixed; inset:0;
  display:none;
  -ms-flex-align:center;
      align-items:center; -ms-flex-pack:center; justify-content:center;
  z-index:999; pointer-events:none;
  background:var(--stage-bg);
}
.memory-game #stage.active{ display:-ms-flexbox; display:flex; }
.memory-game #stage .ghost{
  position:fixed;
  will-change:transform,width,height;
  border-radius:14px;
  transition:transform .45s ease;
  pointer-events:none; overflow:hidden;
}
.memory-game #stage .ghost .inner{ transition:transform .5s; height:100%; }
.memory-game .card.in-flight{ visibility:hidden; }

.memory-game #stage .message{
  position:fixed;
  padding:10px 16px; border-radius:12px;
  font-weight:800; letter-spacing:.2px;
  background:rgba(17,24,39,.9);
  border:1px solid #1f2937;
  opacity:0; -ms-transform:translate(-50%,-50%) scale(.95); transform:translate(-50%,-50%) scale(.95);
  transition:opacity .25s ease, transform .25s ease;
  left:50vw; top:50vh; pointer-events:none;
}
.memory-game #stage .message.show{ opacity:1; -ms-transform:translate(-50%,-50%) scale(1); transform:translate(-50%,-50%) scale(1); }
.memory-game #stage .message.ok{ color:var(--success); }
.memory-game #stage .message.ko{ color:var(--danger); }

/* shake anim (namespaced) */
@keyframes mg-shake{
  0%{transform:var(--t-origin) rotate(var(--rot)) scale(var(--sc,1))}
  20%{transform:var(--t-origin) rotate(calc(var(--rot) - 3deg)) scale(var(--sc,1))}
  40%{transform:var(--t-origin) rotate(calc(var(--rot) + 3deg)) scale(var(--sc,1))}
  60%{transform:var(--t-origin) rotate(calc(var(--rot) - 2deg)) scale(var(--sc,1))}
  80%{transform:var(--t-origin) rotate(calc(var(--rot) + 2deg)) scale(var(--sc,1))}
  100%{transform:var(--t-origin) rotate(var(--rot)) scale(var(--sc,1))}
}
.memory-game .shaking{ animation: mg-shake .35s ease; }

/* responsive */
@media (max-width:900px){
  .memory-game .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .memory-game .board{ display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; gap:24px; }
  .memory-game .col-questions{ -ms-flex-order:1; order:1; }
  .memory-game .col-answers{ -ms-flex-order:2; order:2; }
  .memory-game .column{ padding:12px; }
  .memory-game .cards{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,1fr);
    grid-auto-columns:minmax(140px,1fr);
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .memory-game .card{ scroll-snap-align:start; }
}

.memory-game #end-overlay {
  cursor: pointer;
}