/* ── Farsi Letter Crush · Layout styles ───────────────────────────────────── */

#match3Screen {
  padding:        0 !important;
  /* display controlled by .screen/.screen.active — do not set here */
  flex-direction: column;
  align-items:    center;
  background:     linear-gradient(180deg, #111538 0%, #0a0d24 100%);
  overflow:       hidden;
}

/* Top bar with back button and title */
.m3-topbar {
  display:         flex;
  align-items:     center;
  width:           100%;
  max-width:       var(--game-max-w, 480px);
  padding:         8px 12px;
  box-sizing:      border-box;
  gap:             12px;
  flex-shrink:     0;
}

.m3-topbar-title {
  flex:            1;
  text-align:      center;
  font-weight:     700;
  font-size:       1.05rem;
  color:           #aaffff;
  letter-spacing:  0.04em;
}

.m3-back-btn {
  background:  transparent;
  border:      none;
  color:       #aaffff;
  font-size:   1.4rem;
  cursor:      pointer;
  padding:     4px 8px;
  line-height: 1;
}

/* Music toggle — same size/position as back button */
.m3-music-btn {
  min-width: 40px;
  opacity:   0.9;
  transition: opacity 0.2s;
}

.m3-music-btn.muted {
  color:   rgba(170,255,255,0.35);
  opacity: 0.55;
}

/* Canvas wrapper — takes all remaining width up to max, with side padding */
#match3Game {
  width:       100%;
  max-width:   var(--game-max-w, 480px);
  flex-shrink: 0;
  padding:     0 14px;
  box-sizing:  border-box;
}

#match3Canvas {
  width:       100%;
  display:     block;
  touch-action: none;  /* prevent scroll while playing */
}

/* Word collection panel */
#match3WordPanel {
  width:          100%;
  max-width:      var(--game-max-w, 480px);
  flex:           1;
  overflow-y:     auto;
  padding:        8px 12px 16px;
  box-sizing:     border-box;
}

.m3-word-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4px 5px;
}

.m3-word {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px 9px;
  background:      linear-gradient(135deg, rgba(0,50,28,0.75) 0%, rgba(0,24,14,0.90) 100%);
  border-radius:   9px;
  border:          1px solid rgba(0,190,90,0.22);
  border-left:     3px solid #00cc66;
  box-shadow:      0 4px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

.m3-word-en {
  color:      rgba(180,220,255,0.88);
  font-size:  0.80rem;
  font-style: italic;
  flex-shrink: 1;
  min-width:  0;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m3-word-fa {
  font-family:  'Vazirmatn', sans-serif;
  direction:    rtl;
  color:        #00ff88;
  font-size:    1rem;
  font-weight:  700;
}

.m3-word-pts {
  color:      #ffdd00;
  font-size:  0.85rem;
  font-weight: 700;
}

.m3-word-empty {
  text-align: center;
  color:      rgba(255,255,255,0.3);
  font-size:  0.82rem;
  padding:    12px 0;
  direction:  rtl;
}

.m3-mission-title {
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing:0.06em;
  color:         rgba(170,255,255,0.65);
  text-transform:uppercase;
  margin:        8px 0 4px;
}

.m3-word-check {
  font-size: 0.9rem;
  width:     18px;
  flex-shrink:0;
}

.m3-word--found {
  background:  linear-gradient(135deg, #006e24 0%, #003a12 100%);
  border:      1px solid rgba(80,255,150,0.50);
  border-left: 4px solid #00ff88;
  box-shadow:  0 4px 10px rgba(0,0,0,0.50), 0 0 14px rgba(0,255,100,0.28), inset 0 1px 0 rgba(255,255,255,0.13);
  opacity:     1;
}

.m3-word--scrambled {
  opacity:     0.52;
  border-left: 3px solid #ff4444;
}

.m3-word--scrambled .m3-word-fa {
  text-decoration: line-through;
  color:           #ff8866;
}

.m3-word--bonus {
  background:  linear-gradient(135deg, rgba(50,38,0,0.78) 0%, rgba(26,18,0,0.92) 100%);
  border:      1px solid rgba(200,160,0,0.28);
  border-left: 3px solid #ffcc00;
  box-shadow:  0 4px 10px rgba(0,0,0,0.55), 0 0 10px rgba(255,180,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}