/* ========== 小游戏样式 ========== */
.game-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.game-card {
  flex: 1 1 220px; min-width: 0; text-align: left; border: none; cursor: pointer;
  border-radius: 18px; padding: 16px; color: #fff; position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.game-card:active { transform: scale(.97); }
.game-card.orange { background: linear-gradient(135deg, #fb923c, #f43f5e); }
.game-card.green  { background: linear-gradient(135deg, #34d399, #0ea5e9); }
.game-card.purple { background: linear-gradient(135deg, #a78bfa, #6366f1); }
.gc-ic { font-size: 40px; line-height: 1.1; }
.gc-name { font-size: 18px; font-weight: 700; margin-top: 8px; }
.gc-desc { font-size: 13px; opacity: .9; margin-top: 2px; }
.gc-tip { font-size: 12px; opacity: .85; margin-top: 8px; line-height: 1.5; min-height: 34px; }
.gc-go { display: inline-block; margin-top: 10px; background: rgba(255,255,255,.25); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; }
.game-note { margin-top: 14px; font-size: 12px; color: #94a3b8; line-height: 1.6; }

/* 进度条 */
.game-progress { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 12px 4px 14px; }
.gp-bar { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 999px; transition: width .3s ease; }

/* 气球射手 */
.balloon-field { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 10px 4px; }
.balloon {
  position: relative; width: 150px; height: 175px; border: none; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--bc) 38%, var(--bc) 72%, rgba(0,0,0,.08) 100%);
  border-radius: 50% 50% 48% 52% / 55% 55% 45% 45%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.25); box-shadow: inset -6px -8px 16px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.14);
  transition: transform .12s ease; padding: 0 12px; box-sizing: border-box;
}
.balloon::after {
  content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 22px; background: rgba(100,116,139,.6); border-radius: 2px;
}
.balloon .b-str { font-size: 20px; font-weight: 800; }
.balloon .b-txt { font-size: 15px; font-weight: 700; margin-top: 2px; line-height: 1.3; max-height: 52px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; }
.balloon:active { transform: scale(.95); }
.balloon.hit { animation: balloonPop .5s forwards; }
.balloon.pop { opacity: .35; transform: scale(.85); filter: grayscale(1); }
@keyframes balloonPop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.game-hint { margin-top: 14px; text-align: center; font-size: 13px; color: #64748b; line-height: 1.6; }

/* 翻牌配对 */
.cards-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 8px auto 0; }
.card-cell {
  position: relative; height: 86px; border: none; cursor: pointer; border-radius: 12px;
  perspective: 600px; padding: 0; background: transparent;
}
.card-cell .cc-back, .card-cell .cc-front {
  position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; transition: transform .3s ease; font-size: 14px; font-weight: 600; word-break: break-all; padding: 6px; box-sizing: border-box;
}
.card-cell .cc-back { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: #fff; font-size: 24px; transform: rotateY(0); }
.card-cell .cc-front { background: #fef3c7; color: #1e293b; border: 2px solid #fbbf24; transform: rotateY(180deg); }
.card-cell.open .cc-back { transform: rotateY(180deg); }
.card-cell.open .cc-front { transform: rotateY(0); }
.card-cell.done .cc-back { display: none; }
.card-cell.done .cc-front { transform: rotateY(0); background: #dcfce7; border-color: #22c55e; color: #15803d; animation: cardWin .4s ease; }
@keyframes cardWin { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* 口算冲刺 */
.speed-timer {
  font-size: 26px; font-weight: 800; color: #0ea5e9; font-variant-numeric: tabular-nums;
  background: #e0f2fe; border-radius: 12px; padding: 6px 18px; text-align: center;
}
.speed-timer.danger { color: #ef4444; background: #fee2e2; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.options .opt.right { background: #dcfce7 !important; border-color: #22c55e !important; color: #15803d !important; }
.options .opt.right .letter { background: #22c55e !important; }
.options .opt.wrong { background: #fee2e2 !important; border-color: #ef4444 !important; color: #b91c1c !important; animation: shake .4s; }
.options .opt.wrong .letter { background: #ef4444 !important; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* 结算 */
.result-card { text-align: center; }
.res-emoji { font-size: 52px; line-height: 1.1; }
.res-line { font-size: 17px; margin: 10px 0; color: #334155; }
.res-line b { font-size: 20px; }
.res-line .plus { color: #16a34a; }
.res-tip { margin-top: 12px; font-size: 14px; color: #f59e0b; font-weight: 600; }

/* 窄屏适配 */
@media (max-width: 480px) {
  .balloon { width: 118px; height: 140px; }
  .balloon .b-txt { font-size: 13px; }
  .card-cell { height: 66px; }
  .card-cell .cc-front, .card-cell .cc-back { font-size: 12px; }
}