/* ==========================================
   MATCH RUSH — embedded, scoped stylesheet
   Adapted from: Vocabulary Match Rush Pro.zip
   Every rule is scoped under .match-rush-game
   so it cannot leak into the rest of the site.
   ========================================== */

/* ---------- SCOPED COLORS & THEME ---------- */
.match-rush-game {
  --mr-bg: #121318;
  --mr-card-bg: #1e2029;
  --mr-card-hover: #2a2d3d;
  --mr-text: #ffffff;
  --mr-text-muted: #9499b1;
  --mr-accent: #3b82f6;
  --mr-accent-hover: #2563eb;
  --mr-gold: #fbbf24;
  --mr-correct: #16a34a;
  --mr-correct-border: #4ade80;
  --mr-wrong: #dc2626;
  --mr-wrong-border: #f87171;
  --mr-freeze: #0284c7;
  --mr-modal-bg: rgba(0, 0, 0, 0.8);
}

.match-rush-game.light {
  --mr-bg: #f3f4f6;
  --mr-card-bg: #ffffff;
  --mr-card-hover: #e5e7eb;
  --mr-text: #1f2937;
  --mr-text-muted: #6b7280;
  --mr-accent: #2563eb;
  --mr-accent-hover: #1d4ed8;
  --mr-gold: #d97706;
  --mr-freeze: #0284c7;
  --mr-modal-bg: rgba(0, 0, 0, 0.5);
}

/* ---------- SCOPED RESET ---------- */
.match-rush-game,
.match-rush-game * {
  box-sizing: border-box;
}

.match-rush-game * {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- GAME FRAME ---------- */
.match-rush-game {
  background-color: var(--mr-bg);
  color: var(--mr-text);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.match-rush-game #app {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- HEADER & TOGGLES ---------- */
.match-rush-game header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
}

.match-rush-game header h1 {
  display: none; /* title is in the cabinet marquee */
}

/* In-game back button (top-left of the card) */
.match-rush-game .game-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mr-card-bg);
  border: 1px solid var(--mr-text-muted);
  color: var(--mr-text);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.match-rush-game .game-back-btn:hover,
.match-rush-game .game-back-btn:visited,
.match-rush-game .game-back-btn:focus {
  background: var(--mr-card-hover);
  border-color: var(--mr-accent);
  color: var(--mr-text);
  text-decoration: none;
}

.match-rush-game .header-controls {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.match-rush-game #ttsToggleBtn,
.match-rush-game #darkModeBtn {
  background: var(--mr-card-bg);
  border: 1px solid var(--mr-text-muted);
  color: var(--mr-text);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.match-rush-game #ttsToggleBtn:hover,
.match-rush-game #darkModeBtn:hover {
  background: var(--mr-card-hover);
  border-color: var(--mr-accent);
}

/* ---------- HOME SCREEN & MODE SELECTOR ---------- */
.match-rush-game #homeScreen {
  text-align: center;
  background-color: var(--mr-card-bg);
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.match-rush-game #homeScreen h2 {
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.match-rush-game #homeScreen p {
  color: var(--mr-text-muted);
  margin-bottom: 18px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.match-rush-game .mode-select-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  align-items: center;
}

.match-rush-game .mode-select-container label {
  font-size: 0.8rem;
  color: var(--mr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Shared style for both dropdowns */
.match-rush-game #modeSelect,
.match-rush-game #setSelect {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--mr-card-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239499b1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--mr-text);
  border: 2px solid var(--mr-accent);
  padding: 11px 40px 11px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  width: 100%;
  max-width: 320px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.match-rush-game #modeSelect:hover,
.match-rush-game #setSelect:hover,
.match-rush-game #modeSelect:focus,
.match-rush-game #setSelect:focus {
  border-color: var(--mr-accent-hover);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.match-rush-game .high-score-display {
  font-size: 1.1rem !important;
  color: var(--mr-gold) !important;
  margin-bottom: 20px !important;
}

/* ---------- MAIN BUTTONS ---------- */
.match-rush-game button#startBtn,
.match-rush-game button#restartBtn {
  background-color: var(--mr-accent);
  color: #ffffff;
  border: none;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.match-rush-game button#startBtn:hover,
.match-rush-game button#restartBtn:hover {
  background-color: var(--mr-accent-hover);
  transform: translateY(-2px);
}

.match-rush-game button#startBtn:active,
.match-rush-game button#restartBtn:active {
  transform: translateY(0);
}

/* ---------- GAME SCREEN & STATS ---------- */
.match-rush-game #gameScreen {
  width: 100%;
  display: none; /* hidden until Start is clicked */
}

.match-rush-game #gameScreen.is-active {
  display: block;
}

.match-rush-game #stats {
  display: flex;
  justify-content: space-around;
  background-color: var(--mr-card-bg);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.match-rush-game .stat {
  text-align: center;
}

.match-rush-game .stat span {
  font-size: 0.75rem;
  color: var(--mr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.match-rush-game .stat h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ---------- POWER-UPS BAR & FREEZE BANNER ---------- */
.match-rush-game .powerups-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.match-rush-game .powerup-btn {
  background: var(--mr-card-bg);
  border: 1px solid var(--mr-accent);
  color: var(--mr-text);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.match-rush-game .powerup-btn:hover {
  background-color: var(--mr-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.match-rush-game .powerup-btn:active {
  transform: translateY(0);
}

.match-rush-game #freezeBanner {
  background-color: var(--mr-freeze);
  color: white;
  text-align: center;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 8px;
  margin-bottom: 16px;
  letter-spacing: 1px;
  animation: mrPulseFreeze 1s infinite alternate;
}

@keyframes mrPulseFreeze {
  0% { opacity: 0.8; }
  100% { opacity: 1; box-shadow: 0 0 12px rgba(2, 132, 199, 0.6); }
}

/* ---------- GAME BOARD & COLUMNS ---------- */
.match-rush-game #board {
  display: flex;
  gap: 16px;
  width: 100%;
}

.match-rush-game .column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.match-rush-game .column h3 {
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--mr-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.match-rush-game #verbs,
.match-rush-game #phrases {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

/* ---------- PERFECT SQUARE CARDS ---------- */
.match-rush-game .word {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 12px;
  background-color: var(--mr-card-bg);
  color: var(--mr-text);
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.match-rush-game .word:hover {
  transform: translateY(-2px);
  border-color: var(--mr-accent);
}

.match-rush-game .word:active {
  transform: scale(0.96);
}

.match-rush-game .word.selected {
  border-color: var(--mr-gold);
  background-color: var(--mr-card-hover);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.match-rush-game .word.correct {
  background-color: var(--mr-correct) !important;
  border-color: var(--mr-correct-border) !important;
  color: #ffffff;
  animation: mrPulseCorrect 0.3s ease;
}

.match-rush-game .word.wrong {
  background-color: var(--mr-wrong) !important;
  border-color: var(--mr-wrong-border) !important;
  animation: mrShakeWrong 0.3s ease;
}

/* ---------- MODAL & REVIEW TRACKER ---------- */
.match-rush-game .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--mr-modal-bg);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.match-rush-game .modal-card {
  background-color: var(--mr-card-bg);
  padding: 28px;
  border-radius: 16px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.match-rush-game .modal-card h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.match-rush-game .modal-scores {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
  font-size: 1rem;
}

.match-rush-game .new-high-tag {
  color: var(--mr-gold);
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.match-rush-game .review-section {
  background-color: var(--mr-bg);
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0;
  text-align: left;
}

.match-rush-game .review-section h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--mr-text-muted);
  margin-bottom: 8px;
}

.match-rush-game .summary-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.match-rush-game .review-section h4 {
  font-size: 0.85rem;
  color: var(--mr-text-muted);
  margin-bottom: 6px;
}

.match-rush-game #mistakeList {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-rush-game .mistake-item {
  font-size: 0.85rem;
  background: var(--mr-card-bg);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--mr-wrong-border);
}

/* ---------- FLOATING FEEDBACK ANNOUNCER ---------- */
.match-rush-game .floating-feedback {
  position: fixed;
  pointer-events: none;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--mr-gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  animation: mrFloatUp 0.8s forwards ease-out;
  z-index: 1000;
}

/* ---------- ANIMATIONS ---------- */
@keyframes mrPulseCorrect {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes mrShakeWrong {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes mrFloatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  .match-rush-game {
    padding: 20px 14px;
  }
  .match-rush-game #board {
    gap: 10px;
  }
}


/* =========================================================
   MATCH RUSH — PLAYABILITY UPDATE
   Large square Duolingo-style cards, strong selected shine,
   and smooth disappearing matched pairs.
========================================================= */
.match-rush-game{
  --mr-bg:#f4f7fb;
  --mr-card-bg:#ffffff;
  --mr-card-hover:#eef2ff;
  --mr-text:#202636;
  --mr-text-muted:#667085;
  --mr-accent:#6937d8;
  --mr-accent-hover:#5425b8;
  --mr-gold:#ffc62e;
  --mr-correct:#20a85a;
  --mr-correct-border:#77e2a1;
  --mr-wrong:#e5484d;
  --mr-wrong-border:#ff8b8f;
  --mr-modal-bg:rgba(20,24,35,.48);
  background:var(--mr-bg);
}
.match-rush-game #app{max-width:900px}
.match-rush-game #board{gap:34px}
.match-rush-game #verbs,
.match-rush-game #phrases{gap:16px}
.match-rush-game .word{
  width:min(100%,132px);
  min-width:0;
  aspect-ratio:1/1;
  min-height:0;
  padding:10px;
  border:3px solid #e3e7ef;
  border-radius:16px;
  background:#fff;
  color:#202636;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.25;
  box-shadow:0 5px 0 #dfe3ea,0 9px 22px rgba(32,38,54,.08);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease,
             background-color .18s ease,opacity .35s ease,filter .35s ease;
}
.match-rush-game .word:hover{
  transform:translateY(-3px);
  border-color:#8b6de2;
  box-shadow:0 7px 0 #d8d1ee,0 13px 25px rgba(105,55,216,.15);
}
.match-rush-game .word:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 0 #dfe3ea}
.match-rush-game .word.selected{
  border-color:#ffc62e;
  background:#fffdf1;
  box-shadow:
    0 0 0 4px rgba(255,198,46,.16),
    0 0 25px rgba(255,198,46,.62),
    0 7px 0 #e5d58c;
  animation:mrSelectedGlow .9s ease-in-out infinite alternate;
}
.match-rush-game .word.correct{
  background:#20a85a!important;
  border-color:#77e2a1!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(32,168,90,.15),0 7px 0 #168448,0 12px 28px rgba(32,168,90,.25);
  animation:mrCorrectPop .28s ease-out forwards;
}
.match-rush-game .word.vanish{
  opacity:0;
  transform:scale(.78);
  filter:blur(2px);
  pointer-events:none;
}
.match-rush-game .word.wrong{
  background:#e5484d!important;
  border-color:#ff8b8f!important;
  color:#fff!important;
  box-shadow:0 6px 0 #b83237;
  animation:mrWrongShake .34s ease;
}
.match-rush-game .column h3{font-size:1.05rem;font-weight:900}
.match-rush-game #stats{padding:18px}
.match-rush-game .header-controls button{min-height:38px}
@keyframes mrSelectedGlow{
  from{filter:brightness(1);box-shadow:0 0 0 3px rgba(255,198,46,.12),0 0 16px rgba(255,198,46,.38),0 7px 0 #e5d58c}
  to{filter:brightness(1.04);box-shadow:0 0 0 5px rgba(255,198,46,.18),0 0 32px rgba(255,198,46,.78),0 7px 0 #e5d58c}
}
@keyframes mrCorrectPop{
  0%{transform:scale(1)}
  55%{transform:scale(1.07)}
  100%{transform:scale(1)}
}
@keyframes mrWrongShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
@media(max-width:720px){
  .match-rush-game #board{gap:14px}
  .match-rush-game .word{min-width:0;width:100%;max-width:100%;min-height:0;font-size:1.05rem;padding:10px}
}
@media(max-width:480px){
  .match-rush-game #board{gap:10px}
  .match-rush-game .word{width:100%;max-width:100%;min-height:0;font-size:1rem;padding:10px}
}


/* Mobile override: never force 1:1 squares that clip the 4th pair */
@media (max-width: 720px), (max-height: 800px) {
  .match-rush-game .word {
    aspect-ratio: auto !important;
    height: auto;
    min-height: 0;
    max-width: 100% !important;
  }
  .match-rush-game #verbs,
  .match-rush-game #phrases {
    gap: 6px;
  }
}


/* Ensure game screen fills frame */
.match-rush-game #gameScreen.is-active {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.match-rush-game #board {
  width: 100%;
}