/* public/assets/css/system/online-solitaire.css */

.solitaire-wrapper { padding: 32px 16px; position: relative; }
.solitaire-header { text-align: center; margin-bottom: 24px; }
.solitaire-title { font-size: 2rem; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.solitaire-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; }

.solitaire-workspace { max-width: 900px; margin: 0 auto; position: relative; }

/* 顶栏统计与控制 */
.solitaire-top-bar { display: flex; justify-content: space-between; align-items: center; background: var(--bg-surface); padding: 16px 24px; border-radius: 16px; border: 1px solid var(--border-color); margin-bottom: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); flex-wrap: wrap; gap: 16px; }
.solitaire-stats { display: flex; gap: 24px; }
.stat-box { display: flex; flex-direction: column; }
.stat-box span { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-box strong { font-size: 1.25rem; font-weight: 800; color: var(--text-main); font-family: 'Courier New', Courier, monospace; }

.solitaire-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sol-btn { padding: 10px 18px; font-size: 0.95rem; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.sol-btn-primary { background: #3b82f6; color: #fff; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
.sol-btn-primary:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4); }
.sol-btn-help { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); }
.sol-btn-help:hover { background: rgba(59, 130, 246, 0.05); color: #3b82f6; border-color: #3b82f6; }
.sol-btn-magic { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); animation: pulseMagic 2s infinite; }
@keyframes pulseMagic { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }

/* 🃏 游戏桌布 (高级深青色台泥质感) */
.solitaire-board { background: radial-gradient(circle at center, #064e3b 0%, #022c22 100%); border-radius: 16px; padding: 24px; box-shadow: inset 0 10px 30px rgba(0,0,0,0.6); position: relative; user-select: none; }

/* 响应式尺寸计算基准 (桌面版宽度) */
:root { --card-w: 80px; --card-h: 116px; --card-gap: 16px; }

.board-top-row { display: flex; justify-content: space-between; margin-bottom: 24px; }
.left-zone, .right-zone { display: flex; gap: var(--card-gap); }

.board-bottom-row { display: flex; justify-content: space-between; gap: var(--card-gap); min-height: 400px; }

/* 卡牌槽底座 */
.card-slot { width: var(--card-w); height: var(--card-h); border-radius: 8px; border: 2px dashed rgba(255,255,255,0.15); position: relative; }
.foundation-pile[data-suit="hearts"]::after { content: "♥"; color: rgba(255,255,255,0.05); font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.foundation-pile[data-suit="diamonds"]::after { content: "♦"; color: rgba(255,255,255,0.05); font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.foundation-pile[data-suit="clubs"]::after { content: "♣"; color: rgba(255,255,255,0.05); font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.foundation-pile[data-suit="spades"]::after { content: "♠"; color: rgba(255,255,255,0.05); font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stock-pile::after { content: "↻"; color: rgba(255,255,255,0.2); font-size: 2.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* 🌟 单张纸牌实体 */
.poker-card { position: absolute; top: 0; left: 0; width: var(--card-w); height: var(--card-h); background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, top 0.2s; box-sizing: border-box; padding: 4px 6px; font-family: 'Arial', sans-serif; }
.poker-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.6); }

/* 背面花纹设计 */
.poker-card.face-down { background: linear-gradient(135deg, #1e3a8a 25%, transparent 25%) -10px 0, linear-gradient(225deg, #1e3a8a 25%, transparent 25%) -10px 0, linear-gradient(315deg, #1e3a8a 25%, transparent 25%), linear-gradient(45deg, #1e3a8a 25%, transparent 25%); background-size: 20px 20px; background-color: #172554; padding: 0; border: 4px solid #fff; cursor: default; }
.poker-card.face-down:hover { transform: none; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }

/* 点击选中的高亮发光效果 */
.poker-card.is-selected { box-shadow: 0 0 0 3px #38bdf8, 0 10px 20px rgba(56, 189, 248, 0.5); transform: translateY(-4px); z-index: 100 !important; }

/* 牌面排版 */
.card-val { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.card-suit { font-size: 1.1rem; line-height: 1; margin-top: 2px; }
.card-center { font-size: 2.5rem; flex: 1; display: flex; align-items: center; justify-content: center; }

/* 颜色 */
.suit-hearts, .suit-diamonds { color: #ef4444; }
.suit-clubs, .suit-spades { color: #0f172a; }

/* ==========================================
   🌟 新增：玩法规则模态弹窗 (Glassmorphism) 
   ========================================== */
.sol-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sol-modal-box { background: var(--bg-surface); width: 90%; max-width: 500px; border-radius: 20px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 1px solid var(--border-color); position: relative; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sol-modal-close { position: absolute; top: 16px; right: 20px; font-size: 2rem; line-height: 1; background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.sol-modal-close:hover { color: #ef4444; transform: scale(1.1); }

.sol-modal-title { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin-bottom: 20px; text-align: center; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; }
.sol-modal-content h3 { font-size: 1.1rem; font-weight: 800; color: #3b82f6; margin: 16px 0 8px 0; display: flex; align-items: center; gap: 8px; }
.sol-modal-content p { font-size: 0.95rem; color: var(--text-main); line-height: 1.6; margin-bottom: 12px; }

.sol-modal-rules ul { padding-left: 20px; margin: 0; }
.sol-modal-rules li { font-size: 0.95rem; color: var(--text-main); line-height: 1.6; margin-bottom: 12px; }
.sol-modal-rules li strong { color: var(--text-main); }
.sol-modal-rules li b { color: #ef4444; }

.solitaire-info-card { background: var(--bg-surface); padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); box-sizing: border-box; }

/* 📱 完美响应式布局 (适配极小的手机屏幕) */
@media (max-width: 768px) {
    .solitaire-wrapper { padding: 16px 8px; }
    .solitaire-top-bar { padding: 12px 16px; flex-direction: column; align-items: flex-start; }
    .solitaire-actions { width: 100%; justify-content: flex-end; }
    .solitaire-board { padding: 12px; border-radius: 12px; }
    
    :root { --card-w: 12.5vw; --card-h: 18vw; --card-gap: 1.5vw; }
    
    .board-top-row { margin-bottom: 16px; }
    .card-val { font-size: 1rem; }
    .card-suit { font-size: 0.8rem; }
    .card-center { font-size: 1.8rem; }
    .poker-card { padding: 2px 4px; border-radius: 4px; border-width: 2px; }
    
    .sol-modal-box { padding: 24px; }
}