/* Xshow 3 款游戏专属样式 */

/* ===== 通用游戏容器 ===== */
.game-container {
  margin-top: var(--space-3);
  min-height: 60vh;
}

.game-container button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== 泡泡数学 ===== */
.game-bubble {
  position: relative;
}

.bubble-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.bubble-question {
  font-size: 22px;
  font-weight: bold;
  color: var(--primary);
}

.bubble-score {
  font-size: 18px;
  color: var(--rank-gold);
}

.bubble-area {
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(180deg, #e1f5fe, #b3e5fc);
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--secondary);
}

.bubble-item {
  position: absolute;
  bottom: -60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--secondary));
  border: 3px solid white;
  font-size: 20px;
  font-weight: bold;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: bubble-rise 6s linear forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bubble-item.bubble-correct {
  background: radial-gradient(circle at 30% 30%, #fff, var(--green));
}

@keyframes bubble-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-500px); opacity: 0.5; }
}

.bubble-hint {
  text-align: center;
  margin-top: var(--space-3);
  color: var(--text-light);
  font-size: 14px;
}

/* ===== 数字配对 ===== */
.game-match {
  padding: var(--space-3);
}

.match-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, #e8eaf6, #c5cae9);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.match-question {
  font-size: 28px;
  font-weight: bold;
  color: var(--purple);
  flex: 1;
}

.match-streak {
  font-size: 16px;
  color: var(--orange);
  font-weight: bold;
}

.match-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.match-card {
  background: white;
  border: 3px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: 28px;
  font-weight: bold;
  color: var(--text);
  transition: all 0.2s;
  min-height: 80px;
}

.match-card:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.match-card.correct {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.match-card.wrong {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  animation: shake 0.3s;
}

.match-bottom {
  text-align: center;
  font-size: 18px;
  color: var(--text-light);
}

/* ===== 图形拼搭 ===== */
.game-builder {
  padding: var(--space-3);
}

.builder-top {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.builder-target {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.builder-question {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary);
}

.builder-zone {
  min-height: 140px;
  background: linear-gradient(180deg, #f3e5f5, #e1bee7);
  border: 3px dashed var(--purple);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.builder-zone.correct {
  background: var(--green);
  border-color: var(--green);
  animation: pulse 0.6s;
}

.builder-zone.wrong {
  background: var(--primary);
  border-color: var(--primary);
  animation: shake 0.3s;
}

.builder-zone-item {
  background: white;
  border: 2px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  min-width: 48px;
  text-align: center;
}

.builder-bottom {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.builder-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  justify-content: center;
}

.builder-piece {
  background: white;
  border: 2px solid var(--secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 18px;
  font-weight: bold;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 48px;
}

.builder-piece:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.builder-piece:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-2);
}

.builder-score {
  text-align: center;
  font-size: 16px;
  color: var(--text-light);
}

/* ===== 有余数除法 builder ===== */
.remainder-builder {
  width: 100%;
}

.remainder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: 22px;
  margin-bottom: var(--space-3);
}

.remainder-slot {
  display: inline-block;
  min-width: 50px;
  background: white;
  border: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-weight: bold;
  color: var(--primary);
  text-align: center;
}

.remainder-hint {
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  margin-top: var(--space-3);
}