/* =======================
   MEMU MEMORY – STILI COMPLETI (wide & short)
   ======================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --bg:#0f1226; --card:#14183b; --text:#eef1ff; --muted:#a9b2d8;
  --blue:#29a8ff; --blue-strong:#1f9df5; --border:rgba(255,255,255,.08);
}

/* ===== Contenitore app – CENTRATO, LARGO, POCO ALTO ===== */
.memu-app{
  font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:95vh;
  width:min(2000px, 100vw);     /* più largo */
  margin:0 auto;               /* centrato */
  padding:22px 18px;           /* padding contenuto */
}
.memu-app, .memu-app *{ box-sizing:border-box; }

/* ===== Card / layout base ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:36px 32px;
  margin:16px 0;
  box-shadow:0 16px 38px rgba(0,0,0,.35);
}
.view{ animation:fade .28s ease; }
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-block:12px; }
.grid2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:12px; }
.home-menu{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:14px; }

h3{ font-size:26px; margin:0 0 18px; }
h4{ font-size:17px; margin:16px 0 8px; color:#cdd4ff; }
.small,.lbl-small{ font-size:12px; color:#cbd2ffcc; }
.muted{ color:var(--muted); }

/* Splash più compatta verticalmente */
.view-splash{
  min-height: 58vh; height: 58vh;           /* meno alta */
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.game-title{
  font-size:36px; margin:0 0 6px;
  background:linear-gradient(90deg,#fff,#a7b1ff);
  -webkit-background-clip:text; color:transparent;
}

/* ===== Bottoni ===== */
button{
  border-radius:9999px; border:2px solid transparent;
  padding:12px 18px; color:var(--text);
  background:rgba(255,255,255,.06); cursor:pointer;
}
button:hover{ filter:brightness(1.08); }
.btn-primary{ background:linear-gradient(90deg,#4bb7ff,#298bff); }
.btn-ghost{ border-color:var(--blue); color:var(--blue); background:transparent; }
.secondary{ background:rgba(255,255,255,.08); }
.danger{ background:linear-gradient(90deg,#ff6b6b,#ff4d4d); }

/* ===== Input ovali ===== */
.memu-app input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]),
.memu-app select, .memu-app textarea{
  background: var(--bg) !important; border: 2px solid var(--blue) !important;
  color: var(--text) !important; border-radius: 9999px !important;
  padding: 11px 14px !important; width: 100%; outline: none;
  box-shadow: 0 0 0 0 rgba(41,168,255,.25) !important;
  transition: box-shadow .15s, border-color .15s !important;
  margin: 6px 0;
}
.memu-app input:focus, .memu-app select:focus, .memu-app textarea:focus{
  border-color: var(--blue-strong) !important;
  box-shadow: 0 0 0 6px rgba(41,168,255,.22) !important;
}
.view-auth input[type="radio"], .view-auth input[type="checkbox"]{ accent-color: var(--blue); }
.card-login, .card-register{ max-width: 820px; margin-inline:auto; }
.card-login .row{ max-width: 640px; margin-inline:auto; gap:12px; }

/* ===== Livelli ===== */
.view-levels .card{ overflow:hidden; }
.view-levels .levels-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px; align-items:stretch;
}
@media (max-width: 992px){ .view-levels .levels-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .view-levels .levels-grid{ grid-template-columns: 1fr; } }

/* ===== Autori ===== */
.authors-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.authors-grid .author{ width:100%; text-align:center; }

/* ===== Gioco – WIDE & SHORT ===== */
.game-grid{
  display:grid; grid-template-columns: 3fr 1fr; gap:18px; align-items:start;
}
@media (max-width: 980px){
  .game-grid{ grid-template-columns:1fr; }
  .view-game .right .card{ position: static; }
}

/* Board larga, poco alta */
.cards{ display:grid; gap:12px; grid-template-columns: repeat(4, minmax(170px,1fr)); }

/* Carte 3D più piatte (no scroll verticale) */
.card3d{
  position:relative; perspective: 900px;
  height: clamp(90px, 9.5vw, 130px);       /* << più basse */
  cursor:pointer;
}
.card3d .face{
  position:absolute; inset:0; border-radius:18px; border:2px solid var(--blue);
  display:grid; place-items:center; backface-visibility:hidden;
  transition: transform .35s ease, background .2s, border-color .2s;
}

/* Dorso: tinta unita + pattern geometrico leggero */
.card3d .back{ background: linear-gradient(160deg,#171c3f,#0f1226); }
.card3d .back::after{
  content:""; width:100%; height:100%; border-radius:16px; opacity:1;
  background-image:
    radial-gradient(rgba(122,165,255,.45) 1px, transparent 1px),
    radial-gradient(rgba(122,165,255,.2) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* Fronte: bianco + nota */
.card3d .front{ background:#fff; color:#111; transform: rotateY(180deg); }
.card3d .front::before{ content:"♪"; font-size:48px; color:#111; opacity:.9; }

.card3d.flip .back{ transform: rotateY(180deg); }
.card3d.flip .front{ transform: rotateY(0deg); }
.card3d.matched{ outline:3px solid #19c37d; filter:saturate(1.12); }

/* Pannello mosse (destra) */
.view-game .right .card{ position:sticky; top:18px; min-width:280px; }
.big{ font-size:30px; margin-bottom:8px; }
.stats{ display:flex; gap:16px; align-items:baseline; }
.stats .label{ color:#c9d2ff; font-size:13px; }
.stats .value{ font-size:20px; }
.moves-log{ max-height: 46vh; overflow:auto; padding-right:6px; }
.moves-log .move{ padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px; }

/* ===== Alert / Modal ===== */
.alert{ background: rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.35); color:#ffd6d6; padding:10px 12px; border-radius:12px; margin-bottom:10px; }
.alert.ok{ background: rgba(25,195,125,.12); border-color: rgba(25,195,125,.4); color:#d7ffed; }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; }
.modal-body{ min-height:100%; display:grid; place-items:center; padding:18px; }
.modal-content{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:24px;
  width:min(720px, 92vw);                /* più largo */
  line-height:1.28;
}
#modal_text{
  font-size:24px; margin-bottom:14px;
  white-space:normal; word-break: break-word;
}
#modal_btns.row{ justify-content:flex-start; gap:14px; margin-top:8px; }

/* ===== Classifica compatta (sempre dentro la card) ===== */
#rank_table{ overflow:auto; }
.rank{ display:grid; gap:6px; font-size:14px; }
.rank-row{
  display:grid;
  grid-template-columns: 32px 1fr 64px 64px 64px 110px 140px; /* più strette */
  gap:10px; align-items:center;
}
.rank-head{ font-weight:600; color:#dfe6ff; font-size:15px; }
@media (max-width: 900px){
  .rank-row{ grid-template-columns: 28px 1fr 56px 56px 56px 96px 120px; font-size:13px; }
}

/* ===== FULL-BLEED: il contenitore esce dai limiti del tema e si centra ===== */
.memu-app{
  /* occupa l'intero viewport in larghezza e resta centrato */
  width: 100dvw !important;        /* usa viewport dinamico (niente barra di scorrimento) */
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
}
@supports not (width: 100dvw){
  .memu-app{ width: 100vw !important; }   /* fallback */
}

/* ===== AREA DI GIOCO davvero “wide” ===== */
.game-grid{
  grid-template-columns: 3.2fr 1fr !important;  /* un po' più spazio alle carte */
  gap: 22px !important;
}
.view-game .right .card{ min-width: 320px !important; }

/* le colonne della board più larghe; l’altezza l’hai già messa tu a 95vh */
.cards{ grid-template-columns: repeat(4, minmax(200px, 1fr)) !important; gap: 14px !important; }

/* carte più “piatte” per stare tutte senza scroll verticale */
.card3d{ height: clamp(88px, 9vw, 124px) !important; }

#modal_text strong{ font-weight:700; }
#modal_text .score{ opacity:.95; }
#modal_text br{ line-height: 1.1; }

/* Modal vittoria: testo centrato e con più spazio fra le righe */
#modal_text{
  text-align: center !important;
  line-height: 1.5 !important;   /* più aria verticale */
  font-size: 24px !important;
}