/* =====================================================================================
   PaXaN · Solo-Memory (15.09.2026) — Klassen-Präfix .smg- ("solo memory game").
   Eigener Overlay ÜBER dem "Trainingsaufgabe des Tages"-Popup (.dtp-overlay z-index 10020),
   deshalb z-index 10030. Gleiche Marken-Tokens + Hex-Fallback wie daily-task-popup.css
   (siehe dessen Kopf-Kommentar zur Begründung), gleiches Flexbox-statt-Grid-Prinzip für den
   Modal-Rahmen selbst -- das Karten-RASTER (.smg-grid) ist die eine bewusste Ausnahme: ein
   festes 4×4-Spielfeld ist der klassische, semantisch korrekte CSS-Grid-Anwendungsfall. */

.smg-overlay{
  position:fixed;inset:0;z-index:10030;
  background:rgba(10,10,10,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.smg-overlay.open{display:flex}
.smg-modal{
  width:100%;max-width:420px;max-height:90vh;overflow-y:auto;
  background:var(--paper,#F5F3EE);border:1px solid rgba(138,110,27,.4);border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  font-family:'Archivo',sans-serif;color:var(--ink,#0A0A0A);
  padding:1.5rem 1.4rem 1.6rem;position:relative;text-align:center;
}
.smg-close{
  position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(10,10,10,.14);background:#fff;cursor:pointer;font-size:1.1rem;line-height:1;
  color:var(--ink,#0A0A0A);
}
.smg-close:hover{background:var(--gold,#C9A227);border-color:var(--gold,#C9A227)}

.smg-title{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.05rem;margin:0 0 .5rem;padding-right:2rem;
}
.smg-timer{
  font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold-deep,#8A6E1B);margin:0 0 1rem;
}
.smg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 1rem;
}
.smg-card{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--ink,#0A0A0A);border-radius:8px;cursor:pointer;
  font-size:1.5rem;line-height:1;user-select:none;
  transition:background .15s,transform .1s;
}
.smg-card:hover{transform:scale(1.03)}
.smg-card.up,.smg-card.found{
  background:#fff;border:1px solid rgba(138,110,27,.35);cursor:default;transform:none;
}
.smg-card.found{opacity:.55}

.smg-result{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.03em;
  color:var(--gold-deep,#8A6E1B);margin:0 0 1rem;
}
.smg-again{
  width:100%;padding:.75rem 1rem;border:none;border-radius:9px;
  background:var(--ink,#0A0A0A);color:#F5F3EE;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.04em;cursor:pointer;
}
.smg-again:hover{background:var(--gold,#C9A227);color:var(--ink,#0A0A0A)}

@media(max-width:400px){
  .smg-modal{padding:1.2rem 1rem 1.3rem}
  .smg-card{font-size:1.25rem}
}