/* ── Screens ───────────────────────────────────────────────── */
.mg-screen {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.mg-hidden {
  display: none !important;
}

/* ── Difficulty Screen ─────────────────────────────────────── */
.mg-screen-difficulty {
  justify-content: center;
  gap: 3rem;
  padding: 0 60px 80px;
}

.mg-subtitle {
  font-size: 3rem;
  color: ivory;
  font-family: monospace;
  opacity: 0.85;
}

.mg-diff-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.mg-diff-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  padding: 3.5rem 4rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mg-diff-btn:hover {
  transform: scale(1.025);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
}

.mg-diff-btn:nth-child(1) { background: #E9C46A; }
.mg-diff-btn:nth-child(2) { background: #81B29A; }
.mg-diff-btn:nth-child(3) { background: #E07A5F; }

.mg-diff-emoji {
  font-size: 7rem;
  line-height: 1;
}

.mg-diff-label {
  font-family: 'Chelsea Market', monospace;
  font-size: 6rem;
  color: white;
  text-shadow: -2px 3px 8px rgba(0, 0, 0, 0.25);
  flex: 1;
  text-align: left;
}

.mg-diff-info {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
}

/* ── Game Screen ───────────────────────────────────────────── */
.mg-screen-game {
  justify-content: flex-start;
  padding: 0 20px 20px;
}

.mg-topbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  flex-shrink: 0;
}

.mg-topbar-title {
  font-family: 'Chelsea Market', monospace;
  font-size: 3rem;
  color: #E9C46A;
  text-shadow: -2px 2px 8px rgba(0, 0, 0, 0.4);
}

.mg-score {
  font-family: 'Chelsea Market', monospace;
  font-size: 2.8rem;
  color: ivory;
  background: rgb(8, 50, 0);
  padding: 0.6rem 2rem;
  border-radius: 1rem;
  border: 3px solid #E9C46A;
}

.mg-change-diff-btn {
  font-family: 'Chelsea Market', monospace;
  font-size: 2.2rem;
  color: #E9C46A;
  background: none;
  border: 2px solid rgba(233, 196, 106, 0.45);
  border-radius: 0.75rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.mg-change-diff-btn:hover {
  background: rgba(233, 196, 106, 0.12);
  border-color: #E9C46A;
}

/* ── Confirm Popup ─────────────────────────────────────────── */
.mg-confirm-card {
  width: 680px;
  background: ivory;
  border-radius: 2rem;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
  padding: 5rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border: 8px solid #E9C46A;
}

.mg-confirm-title {
  font-family: 'Chelsea Market', monospace;
  font-size: 4rem;
  color: #5a4c29;
  text-align: center;
}

.mg-confirm-sub {
  font-size: 2.5rem;
  color: #5a4c29;
  font-family: monospace;
  text-align: center;
  opacity: 0.6;
}

.mg-confirm-buttons {
  display: flex;
  gap: 2.5rem;
  margin-top: 1rem;
}

.mg-confirm-cancel,
.mg-confirm-ok {
  font-family: 'Chelsea Market', monospace;
  font-size: 3rem;
  padding: 1.25rem 4rem;
  border: none;
  border-radius: 1.25rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.mg-confirm-cancel {
  background: #ccc;
  color: #444;
}

.mg-confirm-ok {
  background: #E07A5F;
  color: white;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.2);
}

.mg-confirm-cancel:hover,
.mg-confirm-ok:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* ── Card Grid ─────────────────────────────────────────────── */
.mg-grid {
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: grid;
  gap: 16px;
  /* grid-template-columns and grid-template-rows set by JS per difficulty */
}

/* ── Card ──────────────────────────────────────────────────── */
.mg-card {
  position: relative;
  cursor: pointer;
  perspective: 800px;
  user-select: none;
  -webkit-user-select: none;
}

.mg-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mg-card.flipped .mg-card-inner,
.mg-card.matched .mg-card-inner {
  transform: rotateY(180deg);
}

.mg-card-face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Back face */
.mg-card-back-face {
  background: rgb(8, 50, 0);
  border: 5px solid #E9C46A;
}

.mg-card-back-face::after {
  content: '?';
  font-family: 'Chelsea Market', monospace;
  font-size: 9rem;
  color: #E9C46A;
  opacity: 0.55;
  line-height: 1;
}

/* Front face */
.mg-card-front-face {
  background: ivory;
  transform: rotateY(180deg);
  border: 5px solid #F3E5AB;
  padding: 1rem;
}

.mg-card-emoji {
  font-size: 9rem;
  line-height: 1;
}

.mg-card-name {
  font-family: 'Chelsea Market', monospace;
  font-size: 2.2rem;
  color: #5a4c29;
  text-align: center;
}

/* Matched state */
.mg-card.matched .mg-card-front-face {
  background: #d4f0d7;
  border-color: #2d8a3e;
}

/* ── Decorative Card ───────────────────────────────────────── */
.mg-card-decorative {
  cursor: default;
}

.mg-card-deco-face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  background: rgba(8, 50, 0, 0.25);
  border: 2px dashed rgba(233, 196, 106, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
}

.mg-card-deco-icon {
  font-size: 9rem;
  line-height: 1;
  opacity: 0.3;
}

.mg-card-deco-text {
  font-family: 'Chelsea Market', monospace;
  font-size: 2.5rem;
  color: #E9C46A;
  text-align: center;
  opacity: 0.35;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes mg-celebrate {
  0%   { transform: rotateY(180deg) scale(1); }
  35%  { transform: rotateY(180deg) scale(1.1); }
  65%  { transform: rotateY(180deg) scale(0.97); }
  100% { transform: rotateY(180deg) scale(1); }
}

.mg-card.mg-celebrate .mg-card-inner {
  animation: mg-celebrate 0.5s ease forwards;
}

@keyframes mg-shake {
  0%   { transform: rotateY(180deg) translateX(0); }
  20%  { transform: rotateY(180deg) translateX(-14px); }
  40%  { transform: rotateY(180deg) translateX(14px); }
  60%  { transform: rotateY(180deg) translateX(-10px); }
  80%  { transform: rotateY(180deg) translateX(10px); }
  100% { transform: rotateY(180deg) translateX(0); }
}

.mg-card.mg-error .mg-card-inner {
  animation: mg-shake 0.45s ease;
}

.mg-card.mg-error .mg-card-front-face {
  background: #ffd9d9;
  border-color: #cc3333;
}

/* ── Win Overlay ───────────────────────────────────────────── */
.mg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  backdrop-filter: blur(4px);
}

.mg-win-card {
  width: 740px;
  background: ivory;
  border-radius: 2rem;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55);
  padding: 6rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  border: 8px solid #E9C46A;
}

.mg-win-trophy {
  font-size: 12rem;
  line-height: 1;
  animation: mg-trophy-pop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes mg-trophy-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

.mg-win-heading {
  margin: 0;
  font-size: 6rem;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: #5a4c29;
  text-shadow: none;
}

.mg-win-msg {
  font-size: 2.8rem;
  color: #5a4c29;
  font-family: monospace;
  text-align: center;
  opacity: 0.7;
}

.mg-replay-btn {
  font-family: 'Chelsea Market', monospace;
  font-size: 3.5rem;
  padding: 1.5rem 5rem;
  background: #81B29A;
  color: white;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}

.mg-replay-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}