/* 麻将练习应用 - 深度优化配色 v2 */

/* ============ 基础变量 ============ */
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.25);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ============ 背景色 - 高级渐变 ============ */
.bg1[data-v-417d93b8] {
  background: linear-gradient(160deg, #1a4d2e 0%, #0f3320 50%, #1a4d2e 100%) !important;
}

.bg2[data-v-417d93b8] {
  background: linear-gradient(160deg, #1e4d4f 0%, #0d3233 50%, #1e4d4f 100%) !important;
}

.bg3[data-v-417d93b8] {
  background: linear-gradient(160deg, #3a4a45 0%, #252f2b 50%, #3a4a45 100%) !important;
}

.bg4[data-v-417d93b8] {
  background: linear-gradient(160deg, #4a3525 0%, #2d1f15 50%, #4a3525 100%) !important;
}

.bg5[data-v-417d93b8] {
  background: linear-gradient(160deg, #3d2a4a 0%, #251a2d 50%, #3d2a4a 100%) !important;
}

.bg6[data-v-417d93b8] {
  background: linear-gradient(160deg, #154040 0%, #0a2525 50%, #154040 100%) !important;
}

/* 默认背景 */
#bgs[data-v-417d93b8] {
  background: linear-gradient(160deg, #1a4d2e 0%, #0f3320 50%, #1a4d2e 100%) !important;
}

/* ============ 顶部标题区域 ============ */
#bgs[data-v-417d93b8] > uni-view:nth-child(2) {
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 2px;
}

/* ============ 按钮通用样式 ============ */
uni-button[type="primary"] {
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

uni-button[type="primary"]:active {
  transform: scale(0.96) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 切换样式按钮 - 蓝色系 */
uni-button[type="primary"][style*="rgb(28,132,198)"],
uni-button[type="primary"][style*="rgb(28, 132, 198)"] {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
}

/* 重新加载按钮 - 橙色系 */
uni-button[type="primary"][style*="rgb(248,172,89)"],
uni-button[type="primary"][style*="rgb(248, 172, 89)"] {
  background: linear-gradient(135deg, #f59e0b 0%, #c2410c 100%) !important;
}

/* 我已学会按钮 - 绿色系 */
uni-button[type="primary"][style*="rgb(26,179,148)"],
uni-button[type="primary"][style*="rgb(26, 179, 148)"] {
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%) !important;
}

/* ============ 关卡状态样式 ============ */
.success[data-v-417d93b8] {
  background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.successnext[data-v-417d93b8] {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md), 0 0 12px rgba(251, 191, 36, 0.4) !important;
  animation: pulseGlow 2s ease-in-out infinite !important;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 8px rgba(251, 191, 36, 0.3); }
  50% { box-shadow: var(--shadow-md), 0 0 16px rgba(251, 191, 36, 0.5); }
}

.normal[data-v-417d93b8] {
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%) !important;
  border-radius: var(--radius-md) !important;
  opacity: 0.7;
}

.error[data-v-417d93b8] {
  background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* 关卡项 */
.gkitem[data-v-417d93b8] {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}

.gkitem[data-v-417d93b8]:hover {
  transform: translateY(-2px) scale(1.02);
}

.gkitem[data-v-417d93b8]:active {
  transform: scale(0.95);
}

/* ============ 底部功能栏 ============ */
.funbtn[data-v-417d93b8] {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow-sm);
}

.funbtn[data-v-417d93b8]:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
  transform: translateY(-1px);
}

.funbtn[data-v-417d93b8]:active {
  transform: scale(0.96);
  background: rgba(255,255,255,0.1) !important;
}

/* ============ 语音播报按钮 ============ */
uni-view[style*="background: #1515e6"],
uni-view[style*="background:#1515e6"] {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.2s ease !important;
}

uni-view[style*="background: #1515e6"]:hover,
uni-view[style*="background:#1515e6"]:hover {
  box-shadow: var(--shadow-lg), 0 0 25px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-1px);
}

/* ============ 麻将牌样式 ============ */
.pai[data-v-417d93b8] {
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.35), 
              0 1px 2px rgba(0,0,0,0.2),
              inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: transform 0.15s ease !important;
}

.majiangimg[data-v-417d93b8] {
  border-radius: 6px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3),
              0 2px 4px rgba(0,0,0,0.2),
              inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}

.majiangimg[data-v-417d93b8]:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35),
              0 4px 8px rgba(0,0,0,0.25) !important;
}

/* ============ 牌组容器 ============ */
.first[data-v-417d93b8],
.second[data-v-417d93b8] {
  padding: 12px 15px !important;
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-lg) !important;
  margin: 8px 15px !important;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* ============ 关卡选择面板 ============ */
.gkbody[data-v-417d93b8] {
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============ 结果说明区域 ============ */
#bgs[data-v-417d93b8] > uni-view[style*="margin-bottom"] {
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.8 !important;
}

/* ============ 水印 - 更明显 ============ */
#bgs[data-v-417d93b8]::before,
#bgs[data-v-417d93b8]::after {
  opacity: 0.15 !important;
  pointer-events: none;
}

/* 隐藏右上角图标 */
uni-image[src*="wg.dd9f8c99.png"],
uni-image[src*="wg"] {
  display: none !important;
}

/* ============ 选项ABCD标识 ============ */
uni-view[style*="font-size:50rpx"],
uni-view[style*="font-size: 50rpx"] {
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  opacity: 0.9;
}

/* ============ 顶部图标 ============ */
uni-image[style*="position:fixed"][style*="right:20px"],
uni-image[style*="position: fixed"][style*="right: 20px"] {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
}

uni-image[style*="position:fixed"][style*="right:20px"]:hover,
uni-image[style*="position: fixed"][style*="right: 20px"]:hover {
  transform: scale(1.1);
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

/* ============ 文字选中效果 ============ */
::selection {
  background: rgba(59, 130, 246, 0.4);
  color: #fff;
}

/* ============ 页面整体优化 ============ */
uni-page-body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 链接下划线文字 */
uni-view[style*="text-decoration:underline"],
uni-view[style*="text-decoration: underline"] {
  transition: opacity 0.2s ease !important;
}

uni-view[style*="text-decoration:underline"]:hover,
uni-view[style*="text-decoration: underline"]:hover {
  opacity: 0.8;
}

/* ============ 成功/错误图标 ============ */
uni-image[src*="success"],
uni-image[src*="error"] {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
  animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

/* ============ 切换面板标题 ============ */
uni-view[style*="font-weight:bold"][style*="text-align:center"],
uni-view[style*="font-weight: bold"][style*="text-align: center"] {
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 3px;
}

/* ============ 返回按钮 ============ */
uni-image[style*="position:absolute"][style*="left:40rpx"],
uni-image[style*="position: absolute"][style*="left: 40rpx"] {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.2s ease;
  cursor: pointer;
}

uni-image[style*="position:absolute"][style*="left:40rpx"]:hover,
uni-image[style*="position: absolute"][style*="left: 40rpx"]:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* ============ 皮肤/背景选择区块 ============ */
uni-view[style*="width:150rpx"][style*="height:150rpx"],
uni-view[style*="width: 150rpx"][style*="height: 150rpx"] {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  cursor: pointer;
}

uni-view[style*="width:150rpx"][style*="height:150rpx"]:hover,
uni-view[style*="width: 150rpx"][style*="height: 150rpx"]:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}