/* Blogger Memory Game Styles - Scoped to avoid conflicts */
#bloggerMemoryGame {
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}

#bloggerMemoryGame *,
#bloggerMemoryGame *::before,
#bloggerMemoryGame *::after {
  box-sizing: border-box;
}

/* Screen reader only */
.bmg-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;
}

.bmg-container {
  background: linear-gradient(145deg, #1e1e1e, #2e2e2e);
  border: 2px solid #5a3c1e;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  color: #e0e0e0;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
}

.bmg-title {
  position: relative;
  color: #ff4444; /* fallback */
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff6363, #ffd966, #ff6363);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.65), 0 0 14px rgba(255, 0, 0, 0.35);
  display: block;
  animation: bmgGlow 3s ease-in-out infinite alternate;
}

.bmg-title::before,
.bmg-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 28px;
  background: linear-gradient(90deg, rgba(0, 204, 255, 0), rgba(0, 204, 255, 0.9), rgba(0, 204, 255, 0));
  box-shadow: 0 0 8px rgba(0, 204, 255, 0.6);
}

.bmg-title::before { left: -36px; }
.bmg-title::after { right: -36px; }

.bmg-subtitle {
  font-size: 11px;
  letter-spacing: 1px;
  color: #cfefff;
  text-shadow: 0 0 6px rgba(0, 204, 255, 0.7);
  margin: 0 0 10px 0;
}

/* Controls and scoreboard */
.bmg-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bmg-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cfefff;
}

.bmg-select select {
  background: #0f2233;
  color: #cfefff;
  border: 1px solid #00ccff;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
}

.bmg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cfefff;
}

.bmg-scoreboard {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bmg-player {
  background: rgba(0,0,0,0.25);
  border: 1px solid #00ccff;
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 96px;
  display: inline-flex;
  justify-content: space-between;
  gap: 8px;
}

.bmg-player-active {
  box-shadow: 0 0 10px rgba(0,204,255,0.5);
}

.bmg-player-name { font-weight: 700; }
.bmg-player-score { font-weight: 800; color: #00e0ff; }

.bmg-modal-actions { display: flex; gap: 8px; justify-content: center; }

 @keyframes bmgGlow {
  0% { text-shadow: 0 0 4px rgba(255, 68, 68, 0.5), 0 0 10px rgba(255, 0, 0, 0.3); }
  100% { text-shadow: 0 0 10px rgba(255, 68, 68, 0.9), 0 0 20px rgba(255, 0, 0, 0.6); }
}

.bmg-difficulty-section {
  margin-bottom: 12px;
}

.bmg-difficulty-buttons {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.bmg-difficulty-btn {
  background: linear-gradient(135deg, #004466, #002233);
  color: #e0e0e0;
  border: 1px solid #00ccff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 10px;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  min-width: 50px;
}

.bmg-difficulty-btn:hover,
.bmg-difficulty-btn:focus {
  background: linear-gradient(135deg, #006688, #004466);
  transform: translateY(-1px);
  outline: 1px solid #00ccff;
}

.bmg-difficulty-btn.bmg-active {
  background: linear-gradient(135deg, #00e0ff, #0099cc);
  color: #1a1a1a;
  border-color: #fff;
  box-shadow: 0 0 8px rgba(0,224,255,0.4);
}

.bmg-game-stats {
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  color: #00ccff;
  margin-bottom: 12px;
  text-shadow: 0 0 6px #00ccff;
}
.bmg-hint-text {
  font-size: 10px;
  color: #cfefff;
  opacity: 0.85;
  margin: -6px 0 8px 0;
}

.bmg-chip {
  background: #0f2233;
  color: #cfefff;
  border: 1px solid #00ccff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
}
.bmg-chip-active { background: linear-gradient(90deg,#00ccff,#0088bb); color: #1a1a1a; border-color: #fff; box-shadow: 0 0 8px rgba(0,224,255,0.4); }

.bmg-sudden-btn {
  background: linear-gradient(90deg, #ff7777, #cc2222);
  color: #fff;
  border: 1px solid #ffaaaa;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 60, 60, 0.5);
}
.bmg-sudden-btn[aria-pressed="true"] { filter: brightness(1.1); box-shadow: 0 0 14px rgba(255, 60, 60, 0.8); }

.bmg-icon-btn {
  background: #0f2233;
  color: #cfefff;
  border: 1px solid #00ccff;
  border-radius: 50%;
  width: 26px; height: 26px;
  font-size: 14px;
  line-height: 24px;
}

/* Turn toast */
.bmg-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.85);
  color: #cfefff;
  border: 1px solid #00ccff;
  border-radius: 6px;
  padding: 8px 12px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 10000;
}
.bmg-toast.bmg-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Theme hooks (apply at root container) */
#bloggerMemoryGame[data-theme="ectoplasm"] .bmg-card-back { background: linear-gradient(145deg, #0a5f4a, #032f25); }
#bloggerMemoryGame[data-theme="ectoplasm"] .bmg-container { border-color: #00ffcc; background: linear-gradient(145deg, #0b3a30, #07251e); }
#bloggerMemoryGame[data-theme="crimson"] .bmg-card-back { background: linear-gradient(145deg, #661111, #2f0000); }
#bloggerMemoryGame[data-theme="crimson"] .bmg-container { border-color: #ff4444; background: linear-gradient(145deg, #2b0a0a, #1a0000); }
#bloggerMemoryGame[data-theme="moonlit"] .bmg-card-back { background: linear-gradient(145deg, #1f2b4a, #0a1224); }
#bloggerMemoryGame[data-theme="moonlit"] .bmg-container { border-color: #99bbff; background: linear-gradient(145deg, #0b1630, #060c1a); }

.bmg-game-grid {
  display: grid;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  padding-left: 4px;
  padding-right: 4px;
}

.bmg-game-grid.bmg-easy {
  grid-template-columns: repeat(4, 1fr);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.bmg-game-grid.bmg-medium {
  grid-template-columns: repeat(4, 1fr);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  gap: 5px;
}

.bmg-game-grid.bmg-hard {
  grid-template-columns: repeat(4, 1fr);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  gap: 6px;
}
/* Orientation-based columns are set via JS to avoid extra tiles in portrait desktop */

.bmg-memory-card {
  position: relative;
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: 4px;
  perspective: 600px;
  -webkit-perspective: 600px;
  cursor: pointer;
  user-select: none;
  min-height: 50px;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-decoration: none;
}

.bmg-memory-card:hover,
.bmg-memory-card:focus {
  outline: 1px solid #00ccff;
  outline-offset: 1px;
}

.bmg-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
}

.bmg-memory-card.bmg-flipped .bmg-card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.bmg-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin: 0;
  padding: 0;
}

.bmg-card-front {
  background: linear-gradient(145deg, #333, #1a1a1a);
  color: #00ccff;
  font-size: 14px;
  font-weight: bold;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

.bmg-card-front::before {
  content: '?';
}

.bmg-card-back {
  background: linear-gradient(145deg, #005588, #002244);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
  position: relative;
}

/* Improve visibility for the spider emoji specifically */
.bmg-memory-card[data-emoji="🕷"] .bmg-card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 70%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;
  z-index: 0;
}

.bmg-memory-card[data-emoji="🕷"] .bmg-card-emoji {
  position: relative;
  z-index: 1;
}

/* Twemoji-only tweak: brighten spider if rendered as image */
.bmg-memory-card[data-emoji="🕷"] .bmg-card-emoji img {
  filter: invert(1) brightness(1.2) contrast(1.05);
}

/* Improve visibility for the key emoji */
.bmg-memory-card[data-emoji="🗝"] .bmg-card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 70%, transparent 71%);
  box-shadow: 0 0 0 2px rgba(255,215,0,0.15) inset;
  z-index: 0;
}
.bmg-memory-card[data-emoji="🗝"] .bmg-card-emoji { position: relative; z-index: 1; text-shadow: 0 0 2px rgba(255,255,255,0.9), 0 0 6px rgba(255,215,0,0.7); }
.bmg-memory-card[data-emoji="🗝"] .bmg-card-emoji img { filter: brightness(1.25) contrast(1.1) saturate(1.2); }

.bmg-card-emoji {
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 0 3px rgba(255,255,255,0.3);
  margin: 0;
  padding: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", "Twemoji Mozilla", "Segoe UI Symbol", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bmg-game-grid.bmg-medium .bmg-card-emoji {
  font-size: 28px;
}

.bmg-game-grid.bmg-hard .bmg-card-emoji {
  font-size: 24px;
}

/* Ensure Twemoji images scale with font-size */
.bmg-card-emoji img {
  width: 1em;
  height: 1em;
  display: inline-block;
  pointer-events: none;
}

.bmg-memory-card.bmg-matched .bmg-card-inner {
  transform: rotateY(180deg) scale(1.05);
}

.bmg-memory-card.bmg-matched .bmg-card-back {
  background: linear-gradient(145deg, #008855, #004422);
  box-shadow: 0 0 8px rgba(0,255,0,0.4);
}

.bmg-restart-btn {
  background: linear-gradient(90deg, #aa0000, #880000);
  color: #e0e0e0;
  border: 1px solid #ff4444;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 10px;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  text-decoration: none;
}

.bmg-restart-btn:hover,
.bmg-restart-btn:focus {
  background: linear-gradient(90deg, #cc0000, #aa0000);
  transform: translateY(-1px);
  outline: 1px solid #ff4444;
}

/* Modal styles */
.bmg-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  padding: 20px;
}

.bmg-modal-overlay.bmg-show {
  visibility: visible;
  opacity: 1;
}

.bmg-modal-content {
  background: linear-gradient(160deg, #1a1a1a, #2a2a2a);
  border: 2px solid #00ccff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,255,255,0.6);
  transform: scale(0.7);
  transition: transform 0.3s ease;
  max-width: 300px;
  width: 90%;
}

.bmg-modal-overlay.bmg-show .bmg-modal-content {
  transform: scale(1);
}

.bmg-modal-title {
  color: #0f0;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding: 0;
  text-transform: uppercase;
  text-shadow: 0 0 8px #0f0;
  background: none;
  border: none;
}

.bmg-modal-message {
  font-size: 11px;
  color: #e0e0e0;
  margin: 0 0 15px 0;
  padding: 0;
  line-height: 1.4;
}

.bmg-modal-btn {
  background: linear-gradient(90deg, #00ccff, #0088bb);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-.bmg-modal-btn {
  background: linear-gradient(90deg, #00ccff, #0088bb);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 11px;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #1a1a1a;
  margin: 0;
  text-decoration: none;
}

.bmg-modal-btn:hover,
.bmg-modal-btn:focus {
  background: linear-gradient(90deg, #00aaff, #006699);
  transform: translateY(-1px);
  outline: 1px solid #00ccff;
}

@media (max-width: 400px) {
  .bmg-container {
    padding: 8px;
  }

  .bmg-title {
    font-size: 16px;
  }

  .bmg-game-grid {
    gap: 6px;
  }

  .bmg-card-emoji {
    font-size: 28px;
  }

  .bmg-game-grid.bmg-medium .bmg-card-emoji {
    font-size: 24px;
  }

  .bmg-game-grid.bmg-hard .bmg-card-emoji {
    font-size: 20px;
  }
}

/* Firefox-specific adjustments */
@-moz-document url-prefix() {
  @media (max-width: 400px) {
    .bmg-title {
      font-size: 15px;
      letter-spacing: 1.5px;
    }
    .bmg-game-grid.bmg-easy,
    .bmg-game-grid.bmg-medium,
    .bmg-game-grid.bmg-hard {
      max-width: 240px; /* Reduce max-width for Firefox mobile */
    }
  }
}