/* ===== 英语消消乐 ===== */

/* 计分板 */
.hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 14px;
}

.hud-item {
  background: #fff;
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(120, 90, 150, .11);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hud-label { font-size: 12px; color: var(--gray); font-weight: 700; }

.hud-value {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hud-unit { font-size: 11px; color: #b3aabf; font-weight: 700; margin-top: -2px; }

.hud-value.combo { color: var(--orange); }

.hud-value.hurry { color: #e5484d; animation: hurryPulse .6s infinite; }

@keyframes hurryPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

/* 时间条 */
.time-track {
  height: 12px;
  border-radius: 999px;
  background: #ffe7d2;
  overflow: hidden;
  margin: 0 auto 22px;
  max-width: 640px;
}

.time-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb347, var(--orange));
  transition: width .3s linear, background .3s;
}

.time-fill.low { background: linear-gradient(90deg, #ff8a8a, #e5484d); }

/* 棋盘 */
.match-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

.tile {
  position: relative;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 16px;
  border: 3px solid transparent;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(14px, 3.4vw, 17px);
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(120, 90, 150, .12);
  transition: transform .12s, box-shadow .2s, border-color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tile:active { transform: scale(.95); }

.tile.en {
  background: linear-gradient(180deg, #fff, #fff3e6);
  border-color: #ffe0c2;
  color: #d1670f;
}

.tile.zh {
  background: linear-gradient(180deg, #f7fbff, #eaf3ff);
  border-color: #d7e6ff;
  color: #2e6fb5;
}

.tile.selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, .25), 0 8px 20px rgba(255, 138, 61, .3);
  transform: translateY(-3px);
}

.tile.wrong {
  border-color: #e5484d;
  animation: shake .4s;
}

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

.tile.matched {
  animation: popOut .35s forwards;
  pointer-events: none;
}

@keyframes popOut {
  0% { transform: scale(1); }
  45% { transform: scale(1.12) rotate(3deg); background: #d9f7e8; border-color: #4cc38a; }
  100% { transform: scale(0); opacity: 0; }
}

.tile.fresh { animation: popIn .3s ease-out; }

@keyframes popIn {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 得分飘字 */
.float-score {
  position: fixed;
  z-index: 80;
  font-weight: 900;
  font-size: 20px;
  color: var(--green);
  pointer-events: none;
  animation: floatUp .8s ease-out forwards;
  text-shadow: 0 2px 8px rgba(255, 255, 255, .9);
}

@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(.8); opacity: 0; }
  25% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50px) scale(1); opacity: 0; }
}

/* 遮罩 */
.match-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(51, 48, 62, .45);
  backdrop-filter: blur(4px);
}

.match-overlay.show { display: flex; }

.match-card {
  width: min(420px, 100%);
  padding: 30px 26px;
  border-radius: 26px;
  background: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(51, 48, 62, .28);
  animation: cardIn .35s cubic-bezier(.2, 1.4, .5, 1);
}

@keyframes cardIn {
  0% { transform: scale(.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.match-emoji { font-size: 52px; line-height: 1; margin-bottom: 10px; }

.match-card h2 { font-size: 22px; font-weight: 900; margin-bottom: 10px; }

.match-desc { color: var(--gray); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

.match-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.match-stats div {
  flex: 1;
  padding: 10px 6px;
  border-radius: 14px;
  background: #fff6ec;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-stats strong { font-size: 20px; font-weight: 900; color: var(--orange); }
.match-stats span { font-size: 11px; color: var(--gray); font-weight: 700; }

.match-card .btn { width: 100%; }

/* 手机 */
@media (max-width: 640px) {
  .hud { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .hud-item { padding: 8px 4px; border-radius: 13px; }
  .hud-label { font-size: 11px; }
  .match-board { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .tile { min-height: 66px; border-radius: 13px; border-width: 2px; font-size: 13px; padding: 6px 4px; }
  .match-card { padding: 24px 18px; }
}