dapaijizhang3/pages/game/play/play.wxss

/* 实时记账页面样式 */
page {
  background: linear-gradient(135deg, #1A1A1A 0%, #252525 100%);
  min-height: 100vh;
}

.container {
  padding: 30rpx;
  padding-bottom: 120rpx;
}

/* 顶部信息 */
.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1A1A1A 0%, #252525 100%);
  color: white;
}

.header-info {
  flex: 1;
}

.session-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.round-number {
  font-size: 26rpx;
  opacity: 0.9;
}

.header-actions button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
}

/* 快速记账区 */
.quick-entry {
  background: #1A1A1A;
  margin-bottom: 20rpx;
}

.section-label {
  font-size: 28rpx;
  color: #E0E0E0;
  margin-bottom: 16rpx;
  display: block;
}

.player-select {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.player-option {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  background: #f8f8f8;
  position: relative;
  transition: all 0.2s ease;
}

.player-option.selected {
  background: #e8f5e9;
  border-color: #50C878;
}

.player-option.losing {
  background: #ffebee;
  border-color: #ff3b30;
}

.player-name {
  font-size: 28rpx;
  color: #FFFFFF;
  margin-left: 8rpx;
}

.check-mark {
  position: absolute;
  right: 8rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #50C878;
  color: white;
  font-size: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-mark.lose {
  background: #ff3b30;
}

/* 分数输入区 */
.score-section {
  margin-top: 24rpx;
}

.score-input-group {
  display: flex;
  gap: 12rpx;
  align-items: center;
}

.score-preset {
  flex: 1;
  background: #f0f0f0;
  border: none;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  color: #FFFFFF;
  text-align: center;
}

.score-preset:active {
  background: #50C878;
  color: white;
}

.score-input {
  flex: 2;
  background: #f8f8f8;
  border: 1rpx solid #e5e5e5;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  text-align: center;
}

.submit-btn {
  width: 100%;
  margin-top: 24rpx;
}

/* 详细记账区 */
.detailed-entry {
  margin-bottom: 20rpx;
}

.toggle-btn {
  color: #50C878;
  font-size: 26rpx;
}

.detail-content {
  margin-top: 20rpx;
}

.player-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.player-entry:last-child {
  border-bottom: none;
}

.player-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.score-entry {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.current-chips {
  font-size: 26rpx;
  color: #B0B0B0;
}

.chips-input {
  width: 120rpx;
  text-align: center;
  font-weight: bold;
}

.chips-input.win {
  color: #50C878;
  border-color: #50C878;
}

.chips-input.lose {
  color: #ff3b30;
  border-color: #ff3b30;
}

/* 平衡检查 */
.balance-check {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
  margin: 20rpx 0;
}

.balance-label {
  font-size: 28rpx;
  color: #E0E0E0;
  margin-right: 16rpx;
}

.balance-value {
  font-size: 36rpx;
  font-weight: bold;
}

.balance-value.balanced {
  color: #50C878;
}

.balance-value.unbalanced {
  color: #ff3b30;
}

.balance-tip {
  font-size: 24rpx;
  color: #ff3b30;
  margin-left: 16rpx;
}

/* 积分榜 */
.scoreboard {
  margin-bottom: 20rpx;
}

.scoreboard-list {
  margin-top: 20rpx;
}

.scoreboard-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.scoreboard-item:last-child {
  border-bottom: none;
}

.rank {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.scoreboard-item:nth-child(1) .rank {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: white;
}

.scoreboard-item:nth-child(2) .rank {
  background: linear-gradient(135deg, #c0c0c0 0%, #e0e0e0 100%);
  color: white;
}

.scoreboard-item:nth-child(3) .rank {
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
  color: white;
}

.player-score {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: auto;
}

/* 最近记录 */
.recent-records {
  margin-bottom: 100rpx;
}

.record-list {
  margin-top: 20rpx;
}

.record-item {
  padding: 16rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
  position: relative;
}

.record-round {
  font-size: 26rpx;
  font-weight: bold;
  color: #E0E0E0;
  margin-bottom: 8rpx;
}

.record-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.score-item {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  background: #1A1A1A;
  border-radius: 4rpx;
}

.record-time {
  font-size: 22rpx;
  color: #B0B0B0;
}

.undo-btn {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #ff3b30;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  background: #1A1A1A;
  border-radius: 4rpx;
}

/* 历史记录弹窗 */
.history-modal .modal-content {
  width: 90%;
  max-width: none;
}

.history-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.history-item:last-child {
  border-bottom: none;
}

.history-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.history-round {
  font-size: 28rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.history-time {
  font-size: 24rpx;
  color: #B0B0B0;
}

.history-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.history-score {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background: #f8f8f8;
  border-radius: 6rpx;
}

.history-score .player-name {
  font-size: 24rpx;
  color: #E0E0E0;
  margin-right: 8rpx;
}

.history-score .score-change {
  font-size: 26rpx;
  font-weight: bold;
}