/* ==========================================================================
   AL60 Memory Spiel – Stylesheet
   Orientiert sich an theme-Variablen aus style.css (Aktivleben60).
   ========================================================================== */

/* ── Plugin-eigene Tokens (überschreibbar per Theme) ───────────────────── */
.al60-memory-wrapper {
  --al60-accent:        var(--color-accent,      #1e6db5);
  --al60-accent-dark:   var(--color-accent-dark, #15508a);
  --al60-teal:          var(--color-turquoise,   #0e9aa7);
  --al60-teal-dark:     var(--color-turquoise-dark, #0a7580);
  --al60-green:         var(--color-green,       #2e8b57);
  --al60-green-dark:    var(--color-green-dark,  #206040);
  --al60-bg:            var(--color-surface,     #f5f5f5);
  --al60-surface:       var(--color-bg,          #ffffff);
  --al60-surface-alt:   var(--color-surface-alt, #eef3f7);
  --al60-text:          var(--color-primary,     #1a1a1a);
  --al60-muted:         var(--color-muted,       #555555);
  --al60-border:        var(--color-border,      #cccccc);
  --al60-radius:        var(--radius,            8px);
  --al60-radius-lg:     var(--radius-lg,         16px);
  --al60-font:          var(--font-base,         'Segoe UI', Arial, sans-serif);

  /* Karten */
  --al60-card-back:     var(--al60-accent);
  --al60-card-front:    var(--al60-surface);
  --al60-card-matched:  #d4f5e2;
  --al60-card-border-matched: var(--al60-green);

  /* Animation */
  --al60-flip-duration: 0.45s;
  --al60-ease:          cubic-bezier(.4, 0, .2, 1);
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.al60-memory-wrapper {
  font-family:     var(--al60-font);
  color:           var(--al60-text);
  background:      var(--al60-bg);
  border-radius:   var(--al60-radius-lg);
  padding:         1.25rem 1rem 2rem;
  max-width:       780px;
  margin:          0 auto;
  position:        relative;
  z-index:         0;
  isolation:       isolate;
  box-shadow:      0 4px 24px rgba(0,0,0,.08);
}

/* ── Stats-Leiste ───────────────────────────────────────────────────────── */
.al60-stats-bar {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap:                   .5rem;
  background:            var(--al60-surface);
  border-radius:         var(--al60-radius);
  padding:               .75rem .875rem;
  margin-bottom:         1rem;
  box-shadow:            0 2px 8px rgba(0,0,0,.06);
}

.al60-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .15rem;
  padding:        .4rem .25rem;
  border-radius:  var(--al60-radius);
  transition:     background .25s;
}

.al60-stat--score   { background: #fffbf0; }
.al60-stat--highscore { background: #fff8e1; }
.al60-stat--pairs   { background: #f0fbf5; }

.al60-stat__icon  { font-size: 1.4rem; line-height: 1; }
.al60-stat__label {
  font-size:   .78rem;
  color:       var(--al60-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.al60-stat__value {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--al60-text);
  line-height: 1.1;
}

/* ── Steuerung ──────────────────────────────────────────────────────────── */
.al60-controls {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            .75rem 1.25rem;
  padding:        .75rem 0 1rem;
  border-bottom:  2px solid var(--al60-border);
  margin-bottom:  1.25rem;
}

.al60-control-group {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
}

.al60-control-label {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--al60-muted);
  white-space: nowrap;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.al60-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .35rem;
  padding:         .6rem 1.1rem;
  font-family:     var(--al60-font);
  font-size:       1rem;
  font-weight:     700;
  border-radius:   var(--al60-radius);
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      background .2s, color .2s, border-color .2s, transform .1s;
  min-height:      46px;
  white-space:     nowrap;
  background:      var(--al60-surface);
  color:           var(--al60-accent);
  border-color:    var(--al60-accent);
}
.al60-btn:hover,
.al60-btn:focus-visible {
  background:   var(--al60-accent);
  color:        #fff;
  outline:      3px solid var(--al60-accent-dark);
  outline-offset: 2px;
}
.al60-btn:active { transform: scale(.97); }

.al60-btn--primary {
  background: var(--al60-accent);
  color:      #fff;
  border-color: var(--al60-accent-dark);
}
.al60-btn--primary:hover,
.al60-btn--primary:focus-visible {
  background: var(--al60-accent-dark);
  color: #fff;
}

.al60-btn--secondary {
  background:  var(--al60-teal);
  color:       #fff;
  border-color: var(--al60-teal-dark);
}
.al60-btn--secondary:hover,
.al60-btn--secondary:focus-visible {
  background: var(--al60-teal-dark);
  color: #fff;
}

.al60-btn--large {
  padding:   .8rem 1.5rem;
  font-size: 1.15rem;
  min-width: 180px;
}

/* Schwierigkeits-Buttons */
.al60-btn--diff        { font-size: .9rem; padding: .5rem .9rem; min-height: 42px; }
.al60-btn--diff.active {
  background:  var(--al60-accent);
  color:       #fff;
  border-color: var(--al60-accent-dark);
}

/* Select */
.al60-select {
  font-family:  var(--al60-font);
  font-size:    1rem;
  font-weight:  600;
  padding:      .5rem .75rem;
  border:       2px solid var(--al60-border);
  border-radius: var(--al60-radius);
  background:   var(--al60-surface);
  color:        var(--al60-text);
  min-height:   46px;
  cursor:       pointer;
}
.al60-select:focus-visible {
  outline:        3px solid var(--al60-accent);
  outline-offset: 2px;
  border-color:   var(--al60-accent);
}

/* ── Spielfeld ──────────────────────────────────────────────────────────── */
.al60-board {
  display:               grid;
  gap:                   .625rem;
  justify-content:       center;
  padding:               .5rem 0;
}

/* Gitter je nach Schwierigkeit */
.al60-board[data-cols="4"]  { grid-template-columns: repeat(4, 1fr); }
.al60-board[data-cols="5"]  { grid-template-columns: repeat(5, 1fr); }
.al60-board[data-cols="6"]  { grid-template-columns: repeat(6, 1fr); }

/* ── Karte ──────────────────────────────────────────────────────────────── */
.al60-card {
  aspect-ratio:    1 / 1;
  cursor:          pointer;
  perspective:     600px;
  border-radius:   var(--al60-radius);
  -webkit-tap-highlight-color: transparent;
  outline:         none;
  /* min-size für Mobilgeräte / Tablets */
  min-width:       64px;
}

.al60-card:focus-visible .al60-card__inner {
  outline: 3px solid var(--al60-accent);
  outline-offset: 3px;
  border-radius: var(--al60-radius);
}

.al60-card__inner {
  position:        relative;
  width:           100%;
  height:          100%;
  transform-style: preserve-3d;
  transition:      transform var(--al60-flip-duration) var(--al60-ease),
                   box-shadow .2s;
  border-radius:   var(--al60-radius);
}

.al60-card:hover:not(.is-matched) .al60-card__inner {
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transform:  rotateY(8deg) scale(1.03);
}
.al60-card.is-flipped .al60-card__inner,
.al60-card.is-matched .al60-card__inner {
  transform: rotateY(180deg);
}
.al60-card.is-matched:hover .al60-card__inner {
  transform: rotateY(180deg) scale(1.03);
}

/* Vorder- und Rückseite */
.al60-card__face {
  position:          absolute;
  inset:             0;
  border-radius:     var(--al60-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display:           flex;
  align-items:       center;
  justify-content:   center;
  border:            2px solid transparent;
}

/* Rückseite */
.al60-card__back {
  background: linear-gradient(135deg, var(--al60-accent) 0%, var(--al60-accent-dark) 100%);
  border-color: var(--al60-accent-dark);
  font-size:   1.8rem;
  color: rgba(255,255,255,.4);
}
.al60-card__back::after {
  content:   '?';
  font-size: 2.2rem;
  font-weight: 900;
  color: rgba(255,255,255,.7);
}

/* Vorderseite */
.al60-card__front {
  background:  var(--al60-card-front);
  border-color: var(--al60-border);
  transform:   rotateY(180deg);
  font-size:   clamp(1.8rem, 5vw, 3rem);
  line-height: 1;
  box-shadow:  inset 0 1px 4px rgba(0,0,0,.06);
}
.al60-card.is-matched .al60-card__front {
  background:  var(--al60-card-matched);
  border-color: var(--al60-card-border-matched);
}

/* Falsches Paar – Schüttel-Animation */
@keyframes al60-shake {
  0%,100% { transform: rotateY(180deg) translateX(0); }
  20%      { transform: rotateY(180deg) translateX(-6px); }
  40%      { transform: rotateY(180deg) translateX(6px); }
  60%      { transform: rotateY(180deg) translateX(-4px); }
  80%      { transform: rotateY(180deg) translateX(4px); }
}
.al60-card.is-wrong .al60-card__inner {
  animation: al60-shake .4s var(--al60-ease) both;
  border-color: #e53e3e !important;
}
.al60-card.is-wrong .al60-card__front {
  background: #fff5f5;
  border-color: #e53e3e;
}

/* Gefundenes Paar – Puls */
@keyframes al60-match-pulse {
  0%   { transform: rotateY(180deg) scale(1); }
  50%  { transform: rotateY(180deg) scale(1.1); }
  100% { transform: rotateY(180deg) scale(1); }
}
.al60-card.is-matched .al60-card__inner {
  animation: al60-match-pulse .35s var(--al60-ease);
}

/* ── Streak-Badge ───────────────────────────────────────────────────────── */
.al60-streak {
  position:    fixed;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -50%) scale(.6);
  background:  linear-gradient(135deg, #f6d365, #fda085);
  color:       #fff;
  font-size:   1.6rem;
  font-weight: 900;
  padding:     .75rem 2rem;
  border-radius: 50px;
  box-shadow:  0 8px 32px rgba(0,0,0,.25);
  pointer-events: none;
  z-index:     30;
  opacity:     0;
  transition:  opacity .2s, transform .3s var(--al60-ease);
}
.al60-streak.is-visible {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Gewinn-Overlay ───────────────────────────────────────────────────────
   The overlay stays inside the isolated game stacking context. It must never
   cover the website header or an open navigation menu.
   -------------------------------------------------------------------------- */
.al60-win-screen {
  position:   absolute;
  inset:      0;
  background: rgba(15, 23, 42, .72);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    20;
  border-radius: var(--al60-radius-lg);
  backdrop-filter: blur(4px);
  padding:    1rem;
}
.al60-win-screen[hidden] { display: none; }

.al60-win-content {
  background:    var(--al60-surface);
  border-radius: var(--al60-radius-lg);
  padding:       2rem 2.25rem;
  text-align:    center;
  max-width:     420px;
  width:         100%;
  box-shadow:    0 20px 60px rgba(0,0,0,.35);
  position:      relative;
  z-index:       1;
}

.al60-win-emoji { font-size: 4rem; line-height: 1; margin-bottom: .5rem; }

.al60-win-title {
  font-size:     2rem;
  font-weight:   900;
  color:         var(--al60-accent);
  margin-bottom: .25rem;
}

.al60-win-subtitle {
  font-size:     1.1rem;
  color:         var(--al60-muted);
  margin-bottom: 1.25rem;
}

.al60-win-stats {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   .75rem;
  margin-bottom:         1.5rem;
}

.al60-win-stat {
  background:    var(--al60-bg);
  border-radius: var(--al60-radius);
  padding:       .75rem .5rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           .2rem;
}
.al60-win-stat--best {
  background: #fffbf0;
  grid-column: 1 / -1;
}

.al60-win-stat__icon  { font-size: 1.4rem; }
.al60-win-stat__label { font-size: .8rem; color: var(--al60-muted); font-weight: 600; text-transform: uppercase; }
.al60-win-stat__value { font-size: 1.5rem; font-weight: 900; color: var(--al60-text); }

.al60-win-actions {
  display:   flex;
  gap:       .75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Konfetti-Canvas */
.al60-confetti-canvas {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  border-radius:  var(--al60-radius-lg);
}

/* ── Lade-Zustand ───────────────────────────────────────────────────────── */
.al60-board--loading {
  min-height: 300px;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.al60-loader {
  width:   48px;
  height:  48px;
  border:  5px solid var(--al60-border);
  border-top-color: var(--al60-accent);
  border-radius: 50%;
  animation: al60-spin 1s linear infinite;
}
@keyframes al60-spin { to { transform: rotate(360deg); } }

/* ── Neues-Rekord-Banner ────────────────────────────────────────────────── */
@keyframes al60-pop-in {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
.al60-new-record {
  display:       inline-block;
  background:    linear-gradient(90deg, #f6d365, #fda085);
  color:         #fff;
  font-size:     .9rem;
  font-weight:   900;
  padding:       .25rem .75rem;
  border-radius: 50px;
  margin-top:    .5rem;
  animation:     al60-pop-in .4s var(--al60-ease) both;
}

/* ── Responsiv ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .al60-memory-wrapper { padding: 1rem .75rem 1.5rem; }

  .al60-stats-bar {
    grid-template-columns: repeat(3, 1fr);
    padding: .6rem;
  }

  .al60-stat__value { font-size: 1.25rem; }

  .al60-controls {
    flex-direction: column;
    align-items:    flex-start;
    gap:            .6rem;
  }

  .al60-board[data-cols="5"] { grid-template-columns: repeat(4, 1fr); }

  .al60-win-content { padding: 1.5rem 1rem; }
  .al60-win-title   { font-size: 1.6rem; }
  .al60-win-stats   { grid-template-columns: repeat(2, 1fr); }
  .al60-win-actions { flex-direction: column; }
  .al60-btn--large  { width: 100%; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .al60-card__inner,
  .al60-streak { transition: none; }
  .al60-card.is-wrong .al60-card__inner    { animation: none; }
  .al60-card.is-matched .al60-card__inner  { animation: none; }
}


/* ==========================================================================
   v1.1.0 – optional Game Core bridge and responsive mobile card grid
   ========================================================================== */

.al60-memory-wrapper,
.al60-memory-wrapper *,
.al60-memory-wrapper *::before,
.al60-memory-wrapper *::after {
	box-sizing: border-box;
}

.al60-memory-wrapper {
	width: 100%;
	max-width: 780px;
	min-width: 0;
	overflow-x: hidden;
}

.al60-memory-wrapper.al60-game {
	width: 100%;
	max-width: 780px;
	overflow-x: hidden;
}

.al60-memory-wrapper .al60-stats-bar,
.al60-memory-wrapper .al60-controls,
.al60-memory-wrapper .al60-board,
.al60-memory-wrapper .al60-win-content {
	min-width: 0;
	max-width: 100%;
}

.al60-memory-wrapper .al60-board {
	--al60-memory-gap: clamp(4px, 1.25vw, 10px);
	grid-template-columns: repeat(var(--al60-memory-cols, 4), minmax(0, 1fr));
	width: 100%;
	max-width: 100%;
	min-width: 0;
	gap: var(--al60-memory-gap);
	justify-content: stretch;
	padding: 0.5rem 0;
	overflow: hidden;
}

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

.al60-memory-wrapper .al60-board[data-cols="5"] {
	--al60-memory-cols: 5;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.al60-memory-wrapper .al60-board[data-cols="6"] {
	--al60-memory-cols: 6;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.al60-memory-wrapper .al60-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	aspect-ratio: 1 / 1;
}

.al60-memory-wrapper .al60-card__inner,
.al60-memory-wrapper .al60-card__face {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

.al60-memory-wrapper .al60-card__front {
	font-size: clamp(1.35rem, 7.5vw, 3rem);
	overflow: hidden;
}

.al60-memory-wrapper .al60-card__back::after {
	font-size: clamp(1.4rem, 7vw, 2.2rem);
}

.al60-memory-wrapper .al60-game__button.al60-btn {
	width: auto;
	max-width: 100%;
}

.al60-memory-status.al60-game__status {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
}

.al60-memory-status[data-tone="success"] {
	border-left-color: var(--al60-green);
}

.al60-memory-status[data-tone="error"] {
	border-left-color: #b42318;
}

.al60-memory-wrapper .al60-win-screen {
	overflow-y: auto;
	overscroll-behavior: contain;
}

.al60-memory-wrapper .al60-win-content {
	max-height: calc(100% - 1rem);
	overflow-y: auto;
}

@media (max-width: 600px) {
	.al60-memory-wrapper {
		padding: 0.85rem 0.55rem 1.25rem;
		border-radius: 14px;
	}

	.al60-memory-wrapper .al60-stats-bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem;
		padding: 0.5rem;
	}

	.al60-memory-wrapper .al60-stat {
		min-width: 0;
		padding: 0.35rem 0.15rem;
	}

	.al60-memory-wrapper .al60-stat--timer:last-child {
		grid-column: 1 / -1;
	}

	.al60-memory-wrapper .al60-stat__label {
		font-size: 0.72rem;
		overflow-wrap: anywhere;
	}

	.al60-memory-wrapper .al60-stat__value {
		font-size: 1.2rem;
	}

	.al60-memory-wrapper .al60-controls {
		display: grid;
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 0.65rem;
		padding: 0.5rem 0 0.8rem;
		margin-bottom: 0.8rem;
	}

	.al60-memory-wrapper .al60-control-group {
		display: grid;
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 0.35rem;
		width: 100%;
	}

	.al60-memory-wrapper .al60-control-label {
		white-space: normal;
	}

	.al60-memory-wrapper .al60-btn-group {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		gap: 0.4rem;
	}

	.al60-memory-wrapper .al60-btn-group .al60-btn,
	.al60-memory-wrapper .al60-select,
	.al60-memory-wrapper #al60-new-game,
	.al60-memory-wrapper .al60-game__button.al60-btn {
		width: 100%;
		min-width: 0;
	}

	.al60-memory-wrapper .al60-btn--diff {
		padding-right: 0.3rem;
		padding-left: 0.3rem;
		font-size: 0.92rem;
		white-space: normal;
	}

	.al60-memory-wrapper .al60-board[data-cols="5"] {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.al60-memory-wrapper .al60-card__face {
		border-width: 1px;
	}

	.al60-memory-wrapper .al60-card__front {
		font-size: clamp(1.25rem, 8vw, 2.2rem);
	}

	.al60-memory-wrapper .al60-win-screen {
		align-items: flex-start;
		padding: 0.65rem;
	}

	.al60-memory-wrapper .al60-win-content {
		margin: auto 0;
		padding: 1.1rem 0.75rem;
	}

	.al60-memory-wrapper .al60-win-actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.al60-memory-wrapper .al60-win-actions .al60-btn,
	.al60-memory-wrapper .al60-win-actions .al60-game__button {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 380px) {
	.al60-memory-wrapper {
		--al60-memory-gap: 3px;
		padding-right: 0.4rem;
		padding-left: 0.4rem;
	}

	.al60-memory-wrapper .al60-board {
		gap: 3px;
	}

	.al60-memory-wrapper .al60-card__front {
		font-size: clamp(1.15rem, 7.2vw, 1.8rem);
	}

	.al60-memory-wrapper .al60-card__back::after {
		font-size: clamp(1.2rem, 7vw, 1.7rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.al60-memory-wrapper *,
	.al60-memory-wrapper *::before,
	.al60-memory-wrapper *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* v1.1.1 – sichtbarer Game-Core-Tonschalter */
.al60-memory-wrapper .al60-memory-sound {
	white-space: normal;
}

@media (max-width: 600px) {
	.al60-memory-wrapper .al60-memory-sound {
		width: 100%;
		min-width: 0;
	}
}