/* ====== UNO 游戏样式 ====== */
.uno-view { display: none; flex-direction: column; height: 100%; width: 100%; }
.uno-view.active { display: flex; }

.uno-setup-content { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 24px; overflow-y: auto; }
.uno-setup-logo { width: 90px; height: 90px; margin-bottom: 8px; }
.uno-setup-subtitle { font-size: 13px; color: #aaa; margin-bottom: 32px; }
.uno-setup-section-title { font-size: 14px; font-weight: 600; color: #555; align-self: flex-start; margin-bottom: 12px; }

.uno-player-count-row { display: flex; gap: 12px; margin-bottom: 28px; width: 100%; }
.uno-count-btn { flex: 1; height: 64px; border-radius: 16px; border: 2px solid #eee; background: #fff; font-size: 15px; font-weight: 600; color: #888; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: all 0.2s; }
.uno-count-btn .uno-count-num { font-size: 22px; }
.uno-count-btn.selected { border-color: #FF6B6B; background: #fff5f5; color: #FF6B6B; }

.uno-char-select-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-bottom: 28px; }
.uno-char-card { border-radius: 14px; border: 2px solid #eee; background: #fff; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
.uno-char-card .uno-char-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; background: var(--gl); }
.uno-char-card .uno-char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uno-char-card .uno-char-name { font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.uno-char-card .uno-char-tag { font-size: 10px; color: #aaa; }
.uno-char-card.selected { border-color: #FF6B6B; background: #fff5f5; }
.uno-char-card .uno-check-badge { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; background: #FF6B6B; border-radius: 50%; display: none; align-items: center; justify-content: center; color: white; font-size: 10px; }
.uno-char-card.selected .uno-check-badge { display: flex; }

.uno-start-game-btn { width: 100%; height: 52px; background: linear-gradient(135deg, #FF6B6B, #FF8E53); border: none; border-radius: 16px; color: white; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(255,107,107,0.35); transition: transform 0.15s; }
.uno-start-game-btn:active { transform: scale(0.97); }
.uno-start-game-btn:disabled { background: #ddd; box-shadow: none; cursor: not-allowed; }

.uno-game-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 10px 16px; gap: 8px; }
.uno-opponents-area { display: flex; justify-content: space-around; align-items: flex-start; gap: 8px; margin-top: 10px; }
.uno-opponent-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.uno-opponent-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid transparent; transition: border-color 0.3s; overflow: hidden; background: var(--gl); }
.uno-opponent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uno-opponent-avatar.active-turn { border-color: #FF6B6B; box-shadow: 0 0 0 3px rgba(255,107,107,0.2); }
.uno-opponent-name { font-size: 11px; font-weight: 600; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.uno-opponent-card-count { font-size: 10px; color: #aaa; }
.uno-opponent-cards { display: flex; }
.uno-mini-card { width: 18px; height: 26px; border-radius: 3px; background: linear-gradient(135deg, #1a237e, #283593); border: 1px solid rgba(255,255,255,0.3); margin-left: -6px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); }
.uno-mini-card:first-child { margin-left: 0; }

.uno-ai-bubble { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; font-size: 11px; padding: 5px 10px; border-radius: 12px; z-index: 10; opacity: 0; transition: opacity 0.3s; pointer-events: none; max-width: 130px; text-align: center; line-height: 1.4; }
.uno-ai-bubble.show { opacity: 1; }
.uno-ai-bubble::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #333; border-bottom: none; }

.uno-center-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; }
.uno-direction-indicator { font-size: 22px; color: #ccc; transition: transform 0.5s; }
.uno-card-piles { display: flex; gap: 24px; align-items: center; }
.uno-color-glow { width: 110px; height: 154px; border-radius: 14px; position: absolute; filter: blur(20px); opacity: 0.3; transition: background 0.4s; z-index: 0; }

.uno-card { width: 90px; height: 126px; border-radius: 12px; position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.12); flex-shrink: 0; user-select: none; }
.uno-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.uno-card.playable { box-shadow: 0 0 0 3px #FFD700, 0 4px 12px rgba(0,0,0,0.12); animation: uno-playable-pulse 1.5s infinite; }
@keyframes uno-playable-pulse { 0%, 100% { box-shadow: 0 0 0 3px #FFD700, 0 4px 12px rgba(0,0,0,0.12); } 50% { box-shadow: 0 0 0 5px rgba(255,215,0,0.5), 0 4px 12px rgba(0,0,0,0.12); } }
.uno-card.not-playable { opacity: 0.5; cursor: not-allowed; }
.uno-card.not-playable:hover { transform: none; }

.card-inner { width: 100%; height: 100%; border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card-bg-color { position: absolute; inset: 0; border-radius: 12px; }
.card-white-border { position: absolute; inset: 5px; border-radius: 8px; border: 2.5px solid rgba(255,255,255,0.8); }
.card-oval { position: absolute; width: 70%; height: 80%; border-radius: 50%; background: rgba(255,255,255,0.2); transform: rotate(-30deg); }
.card-center-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.card-corner { position: absolute; font-size: 13px; font-weight: 900; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2); z-index: 3; line-height: 1; }
.card-corner.tl { top: 6px; left: 8px; }
.card-corner.br { bottom: 6px; right: 8px; transform: rotate(180deg); }
.card-number { font-size: 42px; font-weight: 900; color: white; text-shadow: 0 2px 6px rgba(0,0,0,0.2); font-style: italic; line-height: 1; }

.card-red .card-bg-color { background: linear-gradient(135deg, #FF6B6B, #ee5a24); }
.card-blue .card-bg-color { background: linear-gradient(135deg, #4ECDC4, #2980b9); }
.card-yellow .card-bg-color { background: linear-gradient(135deg, #FFE66D, #f9ca24); }
.card-yellow .card-number, .card-yellow .card-corner { color: #8B6914; text-shadow: none; }
.card-green .card-bg-color { background: linear-gradient(135deg, #95E1A3, #27ae60); }
.card-wild .card-bg-color { background: linear-gradient(135deg, #2c3e50, #3d3d3d); }
.card-back .card-bg-color { background: linear-gradient(135deg, #1a237e, #283593); }
.card-back-oval { position: absolute; width: 65%; height: 78%; border-radius: 50%; border: 3px solid #c62828; transform: rotate(-30deg); }
.card-back-text { position: relative; z-index: 2; font-size: 20px; font-weight: 900; font-style: italic; color: white; text-shadow: 0 0 10px rgba(255,255,255,0.5); letter-spacing: -1px; }

.uno-draw-pile { width: 90px; height: 126px; border-radius: 12px; cursor: pointer; position: relative; transition: transform 0.2s; }
.uno-draw-pile:hover { transform: translateY(-4px); }
.uno-draw-pile-stack { position: absolute; inset: 0; }
.uno-draw-pile-card { position: absolute; width: 90px; height: 126px; border-radius: 12px; background: linear-gradient(135deg, #1a237e, #283593); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.uno-draw-pile-card:nth-child(1) { transform: translate(-3px, -3px); }
.uno-draw-pile-card:nth-child(2) { transform: translate(-1.5px, -1.5px); }
.uno-draw-pile-card:nth-child(3) { transform: translate(0, 0); }
.uno-draw-count-badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: #333; color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }

.uno-current-color-bar { display: flex; align-items: center; gap: 8px; background: white; border-radius: 20px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.uno-color-dot { width: 16px; height: 16px; border-radius: 50%; transition: background 0.3s; }
.uno-current-color-label { font-size: 12px; color: #666; font-weight: 500; }

.uno-btn { background: linear-gradient(135deg, #FF6B6B, #ee5a24); border: none; border-radius: 20px; color: white; font-size: 16px; font-weight: 900; font-style: italic; padding: 8px 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(255,107,107,0.4); letter-spacing: 1px; transition: transform 0.15s; }
.uno-btn:active { transform: scale(0.95); }
.uno-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.uno-player-hand-area { background: white; border-radius: 20px 20px 0 0; padding: 12px 0 16px; box-shadow: 0 -4px 16px rgba(0,0,0,0.06); flex-shrink: 0; }
.uno-hand-label { font-size: 11px; color: #aaa; font-weight: 500; padding: 0 16px; margin-bottom: 8px; }
.uno-hand-cards-scroll { display: flex; gap: 8px; padding: 8px 16px 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ddd transparent; cursor: grab; user-select: none; }
.uno-hand-cards-scroll::-webkit-scrollbar { height: 4px; }
.uno-hand-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.uno-hand-cards-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.uno-hand-cards-scroll.dragging { cursor: grabbing; }
.uno-hand-cards-scroll .uno-card { width: 64px; height: 90px; flex-shrink: 0; }
.uno-hand-cards-scroll .uno-card .card-number { font-size: 30px; }
.uno-hand-cards-scroll .uno-card .card-corner { font-size: 10px; }

.uno-color-picker-sheet { background: white; border-radius: 24px 24px 0 0; padding: 24px; width: 100%; max-width: 400px; }
.uno-color-picker-title { text-align: center; font-size: 15px; font-weight: 700; color: #333; margin-bottom: 20px; }
.uno-color-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uno-color-choice { height: 70px; border-radius: 16px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; color: white; transition: transform 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.uno-color-choice:active { transform: scale(0.96); }
.uno-color-choice.red { background: linear-gradient(135deg, #FF6B6B, #ee5a24); }
.uno-color-choice.blue { background: linear-gradient(135deg, #4ECDC4, #2980b9); }
.uno-color-choice.yellow { background: linear-gradient(135deg, #FFE66D, #f9ca24); color: #8B6914; }
.uno-color-choice.green { background: linear-gradient(135deg, #95E1A3, #27ae60); }

.uno-result-content { display: flex; flex-direction: column; align-items: center; padding: 40px 32px; gap: 16px; height: 100%; justify-content: center; }
.uno-result-emoji { font-size: 72px; animation: uno-bounce 0.6s ease; }
@keyframes uno-bounce { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.uno-result-title { font-size: 28px; font-weight: 900; color: #222; }
.uno-result-subtitle { font-size: 15px; color: #888; text-align: center; }
.uno-result-winner-card { background: white; border-radius: 20px; padding: 20px 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; }
.uno-result-winner-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #FFB347, #FF6B6B); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; }
.uno-result-winner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uno-result-winner-name { font-size: 18px; font-weight: 700; color: #222; }
.uno-result-winner-label { font-size: 12px; color: #FF6B6B; font-weight: 600; background: #fff5f5; padding: 3px 10px; border-radius: 10px; }
.uno-result-stats { display: flex; gap: 16px; width: 100%; }
.uno-result-stat { flex: 1; background: white; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.uno-result-stat-num { font-size: 24px; font-weight: 800; color: #FF6B6B; }
.uno-result-stat-label { font-size: 11px; color: #aaa; }
.uno-result-btns { display: flex; gap: 12px; width: 100%; margin-top: 20px; }
.uno-result-btn { flex: 1; height: 50px; border-radius: 14px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.15s; }
.uno-result-btn:active { transform: scale(0.97); }
.uno-result-btn.primary { background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: white; box-shadow: 0 4px 14px rgba(255,107,107,0.3); }
.uno-result-btn.secondary { background: #f5f5f5; color: #555; }