/* ============================================================
   GIOCHI DI MEMORIA — stili condivisi dell'area giochi
   Associazione Alzheimer Udine ODV
   Dipende dai token di design in assets/site.css
   ============================================================ */

.game-hero{
  padding:52px 0 56px;
  background: radial-gradient(900px 340px at 85% -10%, var(--amber-tint) 0%, transparent 60%), var(--paper);
  border-bottom:1px solid var(--line);
}

.game-hero h1{max-width:18ch;overflow-wrap:break-word;}

.game-hero .lede{font-size:var(--step-1);color:var(--ink-soft);max-width:58ch;}

.game-breadcrumb{font-size:0.9rem;color:var(--ink-soft);margin-bottom:18px;}

.game-breadcrumb a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--ink-soft);}

.game-breadcrumb a:hover{color:var(--teal);}

/* nota rassicurante sotto il titolo */
.game-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--teal-tint);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 18px;
  color:var(--ink-soft);font-size:0.95rem;margin-top:18px;max-width:640px;
}

.game-note svg{flex:none;width:20px;height:20px;stroke:var(--teal-deep);margin-top:1px;}

/* ---------- GUSCIO DEL GIOCO ---------- */
.game-shell{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px;
}

@media(max-width:560px){.game-shell{padding:20px 16px;}}

.game-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}

.game-topbar h2{margin:0;font-size:var(--step-2);}

.game-topbar .back-link{color:var(--teal);font-weight:700;text-decoration:none;font-size:0.95rem;}

.game-topbar .back-link:hover{text-decoration:underline;}

.game-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}

.stat-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:1rem;color:var(--teal-deep);
}

.stat-chip b{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;}

.game-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:22px;padding-bottom:22px;border-bottom:1px dashed var(--line);}

.game-control{display:flex;flex-direction:column;gap:6px;}

.game-control label{font-weight:700;color:var(--teal-deep);font-size:0.95rem;}

.game-control select{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 44px 12px 16px;cursor:pointer;min-height:50px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23422f89' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

.game-control select:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--teal);}

.game-restart{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  background:var(--teal);color:#fff;box-shadow:var(--shadow);min-height:50px;
  transition:background .15s ease, transform .12s ease;
}

.game-restart:hover{background:var(--teal-deep);transform:translateY(-1px);}

.game-help{font-size:1.02rem;color:var(--ink-soft);margin:0 0 20px;}

/* ---------- TABELLONE MEMORY ---------- */
.memory-board{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;
  max-width:560px;margin:0 auto;
}

.memory-board[data-size="16"]{grid-template-columns:repeat(4,minmax(0,1fr));}

@media(min-width:640px){
  .memory-board{grid-template-columns:repeat(4,minmax(0,1fr));max-width:660px;gap:16px;}
}

@media(min-width:940px){
  .memory-board{grid-template-columns:repeat(6,minmax(0,1fr));max-width:100%;gap:18px;}
  .memory-board[data-size="16"]{grid-template-columns:repeat(8,minmax(0,1fr));}
}

.m-card{
  position:relative;aspect-ratio:1/1;border:0;background:transparent;padding:0;
  cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent;
}

.m-card-inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .45s ease;border-radius:14px;
}

.m-card.is-flipped .m-card-inner{transform:rotateY(180deg);}

.m-card.is-matched{cursor:default;}

.m-face{
  position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  border-radius:14px;display:flex;align-items:center;justify-content:center;
}

.m-card-front{
  background:linear-gradient(165deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:#fff;box-shadow:0 2px 8px rgba(66,47,137,.22);
}

.m-card-front svg{width:34%;height:34%;}

.m-card-back{
  background:var(--white);transform:rotateY(180deg);
  border:2px solid var(--line);color:var(--teal-deep);
}

.m-card-back svg{width:52%;height:52%;}

.m-card.is-matched .m-card-back{
  background:var(--teal-tint);border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-tint);
}

.m-card.is-mismatch .m-card-back{border-color:var(--amber);}

.m-card:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:14px;}

.m-card:disabled{opacity:1;}

/* ---------- PANNELLO VITTORIA ---------- */
.win-panel{
  display:none;text-align:center;padding:20px 8px 8px;
}

.win-panel.is-visible{display:block;}

.win-badge{
  width:74px;height:74px;border-radius:50%;margin:0 auto 18px;
  background:var(--amber-tint);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
}

.win-badge svg{width:38px;height:38px;}

.win-panel h2{font-size:var(--step-2);margin-bottom:8px;}

.win-panel p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:6px;}

.win-panel .win-stats{font-weight:700;color:var(--teal-deep);font-size:1.15rem;margin-bottom:22px;}

.win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}

/* ---------- HUB: selezione giochi ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}

@media(max-width:900px){.hub-grid{grid-template-columns:1fr 1fr;}}

@media(max-width:600px){.hub-grid{grid-template-columns:1fr;}}

.game-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .15s ease, transform .15s ease;
}

.game-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}

.game-card .game-age{font-size:0.85rem;font-weight:700;color:var(--amber);}

.game-card h3{font-size:1.35rem;margin:0;}

.game-card.is-locked{opacity:.6;}

.game-card .btn{align-self:flex-start;margin-top:auto;}

.hub-how{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px;
}

.section-head h2, .memory-band h2{overflow-wrap:break-word;}

@media(max-width:700px){.hub-how{grid-template-columns:1fr;}}

.how-step{display:flex;gap:14px;align-items:flex-start;}

.how-num{
  flex:none;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.1rem;
}

.how-step p{margin:0;color:var(--ink-soft);font-size:0.98rem;}

.how-step strong{color:var(--teal-deep);}

/* utilità */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* nascondi i controller flottanti durante il gioco: area di gioco pulita */
body.game-active .back-to-top{display:none;}

/* ============================================================
   GIRO "RICORDA E RIPETI" — sequenza di tasti da memorizzare
   ============================================================ */
.seq-status{
  font-size:1.12rem;font-weight:700;color:var(--teal-deep);
  margin:0 0 18px;min-height:1.6em;
}

.seq-replay-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;}

.seq-replay{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;color:var(--teal-deep);
  background:transparent;border:2px solid var(--teal);border-radius:999px;
  padding:12px 22px;cursor:pointer;min-height:48px;
  transition:background .15s ease, transform .12s ease;
}

.seq-replay:hover:not(:disabled){background:var(--teal-tint);transform:translateY(-1px);}

.seq-replay:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.seq-replay:disabled{opacity:.55;cursor:default;}

.seq-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px;margin:0 auto;}

@media(min-width:640px){
  .seq-board{grid-template-columns:repeat(6,minmax(0,1fr));max-width:720px;gap:14px;}
}

.seq-tile{
  position:relative;aspect-ratio:1/1;border:2px solid var(--line);border-radius:16px;
  background:var(--white);color:var(--teal-deep);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(66,47,137,.10);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.seq-tile svg{width:46%;height:46%;}

.seq-tile:hover:not(:disabled){border-color:var(--teal);}

.seq-tile:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:16px;}

.seq-tile:disabled{opacity:1;cursor:default;}

.seq-tile.is-lit,.seq-tile.is-lit-ok{
  background:var(--teal);border-color:var(--teal);color:#fff;
  box-shadow:0 4px 14px rgba(66,47,137,.35);
}

.seq-tile.is-lit{animation:seq-pop .35s ease;}

@keyframes seq-pop{
  0%{transform:scale(.9);}
  60%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

.seq-tile.is-mismatch{
  background:var(--amber-tint);border-color:var(--amber);color:var(--amber);
  animation:seq-shake .45s ease;
}

@keyframes seq-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}

/* ============================================================
   GIRO "LA PAROLA GIUSTA" — quiz di parole
   ============================================================ */
.quiz-sentence{
  font-size:var(--step-2);line-height:1.45;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:22px 24px;margin-bottom:8px;outline:none;
}

.quiz-sentence:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.quiz-sentence .quiz-blank{
  display:inline-block;min-width:7ch;border-bottom:3px solid var(--amber);
  color:var(--amber);font-weight:800;
}

@media(max-width:560px){.quiz-sentence{font-size:var(--step-1);padding:18px 16px;}}

.quiz-hint{color:var(--ink-soft);font-size:1rem;margin:0 0 18px;}

.quiz-opts{display:flex;flex-direction:column;gap:12px;max-width:520px;margin-bottom:20px;}

.quiz-opt{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink);
  text-align:left;background:var(--white);border:2px solid var(--line);border-radius:14px;
  padding:16px 20px;cursor:pointer;min-height:56px;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}

.quiz-opt:hover:not(:disabled){border-color:var(--teal);transform:translateY(-1px);}

.quiz-opt:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--teal);}

.quiz-opt:disabled{cursor:default;transform:none;}

.quiz-opt.is-correct{background:var(--teal);border-color:var(--teal);color:#fff;}

.quiz-opt.is-wrong{background:var(--amber-tint);border-color:var(--amber);color:var(--amber);}

.quiz-feedback{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 18px;font-size:1.05rem;
  max-width:620px;color:var(--ink-soft);
}

.quiz-feedback[hidden]{display:none;}

.quiz-feedback.is-good{background:var(--teal-tint);border:1px solid var(--teal);}

.quiz-feedback.is-soft{background:var(--amber-tint);border:1px solid var(--amber);}

.quiz-feedback-icon{flex:none;width:22px;height:22px;margin-top:1px;}

.quiz-feedback-icon svg{width:100%;height:100%;}

.quiz-feedback.is-good .quiz-feedback-icon{color:var(--teal-deep);}

.quiz-feedback.is-soft .quiz-feedback-icon{color:var(--amber);}

.quiz-next{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  background:var(--amber);color:#fff;box-shadow:var(--shadow);min-height:50px;
  transition:background .15s ease, transform .12s ease;
}

.quiz-next:hover:not(:disabled){background:#6d1f68;transform:translateY(-1px);}

.quiz-next:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}

.quiz-next[hidden]{display:none;}