:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-gradient: radial-gradient(circle at 50% 0%, #4facfe 0%, #00f2fe 100%);--bg-main: #4facfe;--board-bg: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .3);--text-color: var(--color-white);--accent-green: #2ecc71;--accent-red: #ff6b81;--accent-blue: #54a0ff}.animal-chess-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;background:linear-gradient(to bottom,#5f72bd,#9b23ea);color:var(--text-color);font-family:PingFang SC,Microsoft YaHei,sans-serif;padding:40px var(--space-5);box-sizing:border-box;overflow-x:hidden}.game-header{text-align:center;margin-bottom:30px;width:100%;max-width:500px}.game-title{font-size:2.2rem;margin:0 0 var(--space-5) 0;color:#6efff5;text-shadow:0 0 10px rgba(110,255,245,.6);font-weight:700;letter-spacing:2px}.game-info{display:flex;justify-content:space-between;align-items:center;background:transparent;width:100%;padding:0 var(--space-5);box-sizing:border-box}.player-indicator{flex:1;background:#0003;border-radius:30px;padding:10px 0;text-align:center;font-weight:600;font-size:1rem;color:#ffffffb3;transition:all .3s ease;border:1px solid transparent;max-width:140px}.player-indicator.active{background:#ffffff40;color:var(--color-white);border-color:#ffffff80;box-shadow:0 0 15px #fff3;transform:scale(1.05)}.vs{font-size:1.5rem;font-weight:900;color:#fff6;margin:0 15px;font-style:italic}.game-board{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#ffffff1a;padding:10px;border-radius:var(--space-3);border:4px solid rgba(255,255,255,.25);box-shadow:0 15px 35px #0000004d;-webkit-backdrop-filter:blur(var(--space-5));backdrop-filter:blur(var(--space-5));margin-bottom:var(--space-5);width:95%;max-width:600px;aspect-ratio:.75;box-sizing:border-box}.cell{position:relative;width:100%;height:100%;border-radius:0;cursor:pointer;perspective:1000px;display:flex;justify-content:center;align-items:center;border:1px solid rgba(255,255,255,.2);box-sizing:border-box}.animal-chess-container .piece{width:90%!important;height:90%!important;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);border-radius:var(--space-2);box-shadow:0 2px var(--space-2) #0003;top:auto;left:auto}.animal-chess-container .piece.flipped{transform:rotateY(180deg)}.animal-chess-container .piece-face{position:absolute;top:0;left:0;width:100%!important;height:100%!important;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;border-radius:var(--space-2);box-shadow:inset 0 0 0 1px #ffffff1a;overflow:hidden;padding:0}.animal-chess-container .piece-back{background:radial-gradient(circle at 50% 50%,#4facfe,#00f2fe);border:2px solid rgba(255,255,255,.3)}.animal-chess-container .piece-back:after{content:"?";font-size:3rem;font-weight:900;color:#fff6;text-shadow:0 2px 4px rgba(0,0,0,.2)}.animal-chess-container .piece-back:before{display:none}.animal-chess-container .piece-front{background:#fdfdfd;transform:rotateY(180deg);border:4px solid transparent}.animal-chess-container .piece-front.red{border-color:#ff6b81;background:radial-gradient(circle,var(--color-danger-50) 60%,#ff6b81 150%)}.animal-chess-container .piece-front.blue{border-color:#54a0ff;background:radial-gradient(circle,#f0f8ff 60%,#54a0ff 150%)}.animal-chess-container .piece-image{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.animal-chess-container .piece-name-overlay{display:block;position:absolute;bottom:0;right:0;width:100%;background:linear-gradient(to top,#000000b3,#0000);color:var(--color-white);text-align:right;padding:4px var(--space-2);font-size:var(--text-sm);font-weight:700;box-sizing:border-box;text-shadow:1px 1px 2px rgba(0,0,0,.8);opacity:1;z-index:2;font-family:sans-serif;pointer-events:none;border-bottom-right-radius:var(--space-2);border-bottom-left-radius:var(--space-2)}.cell.selected .piece{transform:rotateY(180deg) scale(1.15);box-shadow:0 0 25px #ffd70099;z-index:10}.cell.selected .piece-front{border-color:gold;box-shadow:0 0 15px gold}.cell.valid-move:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--space-5);height:var(--space-5);background:#2ecc71cc;border-radius:var(--radius-full);box-shadow:0 0 10px #2ecc71;z-index:5;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.8);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-50%) scale(.8);opacity:.7}}.effect-container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;z-index:50;pointer-events:none}.effect-eat{font-size:8rem;animation:popIn .6s cubic-bezier(.175,.885,.32,1.275) forwards;filter:drop-shadow(0 0 10px rgba(255,0,0,.8))}.effect-crash{font-size:6rem;animation:popIn .6s cubic-bezier(.175,.885,.32,1.275) forwards;filter:drop-shadow(0 0 10px rgba(0,0,0,.8))}@keyframes popIn{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.2) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.game-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);width:100%;max-width:300px}.mode-toggle{display:flex;background:#0000004d;border-radius:30px;padding:4px;width:100%;position:relative}.toggle-btn{flex:1;background:transparent;border:none;padding:10px;color:#fff9;font-size:1rem;font-weight:600;cursor:pointer;border-radius:25px;transition:all .3s ease;z-index:1}.toggle-btn.active{color:var(--color-white);background:#6464ff99;box-shadow:0 4px 10px #0003}.btn-secondary{width:100%;padding:15px;border-radius:var(--space-3);border:none;background:linear-gradient(90deg,#56ab2f,#a8e063);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 5px 15px #56ab2f66;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;gap:10px}.btn-secondary:active{transform:translateY(2px);box-shadow:0 2px 5px #56ab2f66}.rules-panel{display:block;width:100%;max-width:500px;background:#ffffff1a;border-radius:15px;padding:15px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:10px;margin-bottom:var(--space-5);color:#ffffffe6;box-sizing:border-box}.rules-panel h3{margin:0 0 10px;font-size:1.1rem;color:#6efff5;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:5px}.rules-panel ul{margin:0;padding:0 0 0 var(--space-5);font-size:.9rem;line-height:1.5}.rules-footer-image{margin-top:10px;text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}.rules-footer-image img{max-width:100%;height:auto;border-radius:var(--space-2);display:block;margin:0 auto}.game-over-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:10000;-webkit-backdrop-filter:blur(var(--space-2));backdrop-filter:blur(var(--space-2));padding:var(--space-5);box-sizing:border-box}.modal-content{background:var(--color-white);padding:30px;border-radius:var(--space-5);text-align:center;width:90%;max-width:320px;color:#333;box-shadow:0 var(--space-5) 60px #00000080;animation:modalPop .4s cubic-bezier(.175,.885,.32,1.275);pointer-events:auto;position:relative}.winner-title{font-size:1.2rem;color:#666;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px}.winner-text{font-size:2.2rem;font-weight:800;background:linear-gradient(45deg,#ff6b81,#54a0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:25px}.btn-primary{width:100%;padding:15px;background:linear-gradient(90deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:var(--space-3);font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 5px 15px #4facfe66;transition:transform .2s}.btn-primary:active{transform:scale(.98)}.game-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;color:#fff;padding:var(--space-3) var(--space-6);border-radius:50px;z-index:2000;pointer-events:none;font-size:1rem;text-align:center;white-space:nowrap;box-shadow:0 5px var(--space-5) #0003;animation:fadeInOut 2s ease forwards;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-40%)}10%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-60%)}}@keyframes modalPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media (max-height: 700px){.animal-chess-container{padding:10px}.game-board{padding:5px;gap:0;margin-bottom:10px;border-width:2px}.game-title{font-size:1.5rem;margin-bottom:10px}.game-controls{gap:10px}}@media (max-width: 480px){.animal-chess-container{padding:10px 5px}.game-title{font-size:1.6rem;margin-bottom:15px}.game-info{padding:0 5px;margin-bottom:15px}.player-indicator{font-size:.9rem;padding:6px 0}.vs{font-size:1.2rem;margin:0 var(--space-2)}.game-board{width:100%;padding:4px;border-width:2px;box-shadow:0 5px var(--space-5) #0003}.cell{border-width:.5px}.game-controls{width:90%}.rules-panel{padding:10px;margin-top:10px}.rules-panel h3{font-size:1rem}.rules-panel ul{font-size:.8rem;padding-left:15px}}