*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;display:flex}.game-container{background:linear-gradient(#f5f0e8 0%,#e8e0d0 100%);border:3px solid #8b6914;border-radius:20px;width:100%;max-width:700px;padding:30px;box-shadow:0 20px 60px #0006,inset 0 1px #ffffff80}.game-header{text-align:center;border-bottom:2px solid #8b69144d;margin-bottom:20px;padding-bottom:15px}.game-header h1{color:#3e2723;text-shadow:1px 1px 2px #ffffff80;margin-bottom:5px;font-size:2.5rem;font-weight:700}.subtitle{color:#5d4037;font-size:1rem;font-style:italic}.game-info{flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;display:flex}.player-info{align-items:center;gap:10px;font-size:1.2rem;font-weight:700;display:flex}.color-indicator{background:#8b69141a;border:2px solid #8b69144d;border-radius:25px;padding:8px 20px;transition:all .3s}.color-indicator.red{color:#c62828;background:linear-gradient(135deg,#ffebee,#ffcdd2);border-color:#c62828;box-shadow:0 2px 8px #c628284d}.color-indicator.black{color:#37474f;background:linear-gradient(135deg,#eceff1,#cfd8dc);border-color:#37474f;box-shadow:0 2px 8px #37474f4d}.check-indicator{color:#c62828;background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #c62828;border-radius:20px;padding:8px 16px;animation:.5s ease-in-out infinite shake;box-shadow:0 2px 8px #c6282866}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.status-message{color:#5d4037;background:#8b69141a;border:2px solid #8b691433;border-radius:30px;padding:12px 30px;font-size:1.1rem;transition:all .3s}.status-message.active{color:#1565c0;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:#1565c0;animation:2s infinite pulse}.status-message.check{color:#c62828;background:linear-gradient(135deg,#ffebee,#ffcdd2);border-color:#c62828;font-weight:700;animation:.5s ease-in-out infinite shake}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 2px 8px #1565c04d}50%{transform:scale(1.02);box-shadow:0 4px 16px #1565c080}}.error-message{color:#d32f2f;background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #d32f2f;border-radius:10px;padding:12px 24px;font-size:1rem;box-shadow:0 2px 8px #d32f2f4d}.reset-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:30px;padding:14px 40px;font-size:1.1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #4caf5066}.reset-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5080}.board-wrapper{justify-content:center;display:flex;position:relative}.board-container{aspect-ratio:.9;width:100%;max-width:550px;position:relative}.board{border-radius:10px;width:100%;height:100%;position:relative;overflow:hidden}.board-background{background:linear-gradient(135deg,#8b69141a 25%,#0000 25%) 0 0/20px 20px,linear-gradient(225deg,#8b69141a 25%,#0000 25%) 0 0/20px 20px,linear-gradient(45deg,#8b69141a 25%,#0000 25%) 0 0/20px 20px,linear-gradient(315deg,#8b69141a 25%,#0000 25%) 0 0/20px 20px,linear-gradient(#dcb35c 0%,#c9a050 50%,#b8953e 100%) 0 0/100% 100%;position:absolute;inset:0;box-shadow:inset 0 0 100px #0003,0 10px 40px #0000004d}.board-grid{width:90%;height:90%;position:absolute;inset:5%}.river-text{letter-spacing:10px;opacity:.6;font-family:KaiTi,STKaiti,SimSun,serif;font-size:36px;font-weight:700}.pieces-layer{pointer-events:none;width:90%;height:90%;position:absolute;inset:5%}.piece-container{cursor:pointer;z-index:10;pointer-events:auto;justify-content:center;align-items:center;width:11.11%;height:10%;transition:transform .2s;display:flex;position:absolute}.piece-container:hover{z-index:20;transform:scale(1.05)}.piece-container.selected{z-index:20}.piece-container.selected .piece{animation:1.5s ease-in-out infinite selected-pulse;box-shadow:0 0 20px #ffd700cc,0 4px 15px #0006,inset 0 2px 4px #ffffff80}@keyframes selected-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.piece{cursor:pointer;border:2px solid;border-radius:50%;justify-content:center;align-items:center;width:75%;height:75%;font-size:1.4rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 15px #0006,inset 0 2px 4px #fff6,inset 0 -2px 4px #0003}.piece-text{text-shadow:1px 1px 2px #0000004d;font-family:KaiTi,STKaiti,SimSun,serif;font-size:1.6rem}.red-piece{color:#fff;text-shadow:0 1px 2px #0000004d;background:radial-gradient(circle at 30% 30%,#ff7b7b,#c62828);border-color:#8b0000}.black-piece{color:#fff;text-shadow:0 1px 2px #00000080;background:radial-gradient(circle at 30% 30%,#78909c,#263238);border-color:#1a1a2e}.valid-moves-layer{pointer-events:none;width:90%;height:90%;position:absolute;inset:5%}.valid-move-marker{cursor:pointer;pointer-events:auto;background:radial-gradient(circle at 30% 30%,#4caf50cc,#4caf5099);border:3px solid #2e7d32;border-radius:50%;width:24px;height:24px;transition:all .2s;animation:1.5s ease-in-out infinite valid-move-pulse;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #4caf5099,inset 0 1px 2px #ffffff80}.valid-move-marker:hover{background:radial-gradient(circle at 30% 30%,#4caf50,#4caf50cc);transform:translate(-50%,-50%)scale(1.2)}.valid-move-marker.capture{background:radial-gradient(circle at 30% 30%,#f44336cc,#f4433699);border-color:#c62828;animation:1.5s ease-in-out infinite capture-pulse;box-shadow:0 2px 8px #f4433699,inset 0 1px 2px #ffffff80}.valid-move-marker.capture:hover{background:radial-gradient(circle at 30% 30%,#f44336,#f44336cc)}@keyframes valid-move-pulse{0%,to{box-shadow:0 2px 8px #4caf5099,inset 0 1px 2px #ffffff80}50%{box-shadow:0 4px 16px #4caf50cc,inset 0 1px 2px #ffffff80}}@keyframes capture-pulse{0%,to{box-shadow:0 2px 8px #f4433699,inset 0 1px 2px #ffffff80}50%{box-shadow:0 4px 16px #f44336cc,inset 0 1px 2px #ffffff80}}.waiting-message{color:#5d4037;text-align:center;padding:50px;font-size:1.5rem;font-weight:600}.check-alert-overlay{z-index:100;background:#000000b3;border-radius:10px;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.check-alert{text-align:center;background:linear-gradient(135deg,#fff8e1,#ffecb3);border:3px solid #c62828;border-radius:20px;padding:35px 50px;animation:.3s popIn;box-shadow:0 15px 50px #0006,inset 0 1px #fffc}@keyframes popIn{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.check-icon{margin-bottom:15px;font-size:3.5rem;animation:.5s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.check-text{color:#c62828;text-shadow:1px 1px 2px #0000001a;margin-bottom:10px;font-size:1.8rem;font-weight:700}.check-subtext{color:#5d4037;font-size:1.1rem;font-weight:500}.game-rules{background:#8b69141a;border:1px solid #8b691433;border-radius:15px;margin-top:25px;padding:25px}.game-rules h3{color:#3e2723;border-bottom:2px solid #8b69144d;margin-bottom:15px;padding-bottom:10px;font-size:1.3rem}.game-rules ul{color:#5d4037;padding-left:10px;list-style-position:inside}.game-rules li{margin:8px 0;font-size:1.05rem}.back-btn{color:#fff;background:linear-gradient(135deg,#8b6914,#6d4c41);border-radius:25px;margin-bottom:15px;padding:10px 20px;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-block;box-shadow:0 3px 10px #0003}.back-btn:hover{background:linear-gradient(135deg,#9a7b24,#7d5c51);transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}@media (max-width:600px){body{padding:10px}.game-container{padding:20px}.game-header h1{font-size:1.8rem}.subtitle{font-size:.9rem}.board-container{max-width:100%}.piece-text{font-size:1.2rem}.valid-move-marker{border-width:2px;width:18px;height:18px}.status-message{padding:10px 20px;font-size:1rem}.player-info{flex-wrap:wrap;justify-content:center;font-size:1rem}}