.login-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#d62d92,#5b1e7d);font-family:Arial,sans-serif;z-index:9999;overflow:hidden}.login-box{width:350px;padding:20px;background:#ffffff14;border-radius:15px;text-align:center;box-shadow:0 4px 20px #0006}.logo-section{margin-bottom:20px}.logo{width:140px;margin:0 auto}.input-group{display:flex;align-items:center;margin:15px 0;border:1px solid rgba(255,255,255,.5);background:#ffffff1a;border-radius:8px;padding:8px 10px}.input-group .icon{width:20px;margin-right:10px}.input-group input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px}.input-group input::placeholder{color:#ddd}.forgot-password{text-align:right;margin-bottom:15px}.forgot-password a{font-size:12px;color:#ddd;text-decoration:none}.forgot-password a:hover{text-decoration:underline}.login-btn{width:100%;padding:12px;border:none;border-radius:25px;background:linear-gradient(to right,#ff9800,#f57c00);color:#fff;font-weight:700;font-size:16px;cursor:pointer;transition:.3s}.login-btn:hover{opacity:.9}.register-btn{width:100%;padding:10px;border:none;border-radius:25px;background:linear-gradient(to right,#4caf50,#388e3c);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.3s;margin-top:10px}.register-btn:hover{opacity:.9}.delete-btn{width:100%;padding:10px;border:none;border-radius:25px;background:linear-gradient(to right,#f44336,#d32f2f);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.3s;margin-top:10px}.delete-btn:hover{opacity:.9}.turn-indicator-container{display:flex;align-items:center;gap:12px;padding:12px 24px;border-radius:12px;font-size:1.5rem;font-weight:600;box-shadow:0 0 12px #00000026;animation:fadeInSlide .6s ease-out;transition:background-color .3s ease}.player-circle{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background-color:#ffffff26;box-shadow:inset 0 0 6px #ffffff4d;animation:bounce 1.5s infinite}.player-text{display:flex;gap:6px;align-items:baseline}.player-text .label{opacity:.8;font-size:1.2rem}.player-text .name{font-size:1.5rem;font-weight:700}.turn-indicator-container.red{background-color:#ff4d4d;color:#fff;box-shadow:0 0 12px #ff4d4d}.turn-indicator-container.green{background-color:#4caf50;color:#fff;box-shadow:0 0 12px #4caf50}.turn-indicator-container.yellow{background-color:gold;color:#000;box-shadow:0 0 12px gold}.turn-indicator-container.blue{background-color:#39f;color:#fff;box-shadow:0 0 12px #39f}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.dice-container{display:flex;flex-direction:column;align-items:center;gap:16px;margin:1rem}.dice-button{font-size:2rem;padding:1rem 2rem;background-color:#2ecc71;color:#fff;border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 6px #0003;transition:transform .1s ease-in-out}.dice-button:hover{transform:scale(1.05)}.dice-image{width:60px;height:60px;transition:transform .3s ease}.dice-image.rolling{animation:shake .8s}@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}to{transform:rotate(0)}}.home-square{display:flex;justify-content:center;align-items:center;height:180px;width:180px;box-sizing:border-box}.home-pons{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px}.pon{width:25px;height:25px;border-radius:50%;background-color:#fff;border:3px solid black}.red-zone .pon{background-color:#d10000}.green-zone .pon{background-color:#007f00}.yellow-zone .pon{background-color:#b79400}.blue-zone .pon{background-color:#06c}.winner-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;border-radius:10px;padding:30px;text-align:center;max-width:400px;box-shadow:0 0 20px #fff6;animation:popIn .4s ease}.modal-content h2{font-size:28px;color:#333}.modal-content p{margin:15px 0;color:#666}.modal-content button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px}.modal-content button:hover{background-color:#0056b3}@keyframes popIn{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;padding:2rem;border-radius:10px;max-width:400px;width:90%;text-align:center;animation:pop-in .3s ease-in-out}.modal h2{margin-bottom:1rem;color:#333}.modal ul{text-align:left;padding-left:1rem;margin-bottom:1rem}.modal li{margin-bottom:.5rem}.modal button{background-color:#4caf50;border:none;color:#fff;padding:.5rem 1rem;cursor:pointer;border-radius:5px}@keyframes pop-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.game-piece{width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:transform .2s ease;box-shadow:0 6px 14px #0000002e;border:2px solid rgba(255,255,255,.18);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60}.game-piece:hover{transform:scale(1.1)}.game-piece.red{background:linear-gradient(180deg,#ff7b6b,#e74c3c);box-shadow:0 6px 14px #e74c3c47}.game-piece.blue{background:linear-gradient(180deg,#5bb8ff,#3498db);box-shadow:0 6px 14px #3498db47}.placeholder-token{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 2px 6px #00000059;z-index:4;position:relative;margin:.25rem}.placeholder-token .piece-text{font-size:14px}.placeholder-token.red{background:linear-gradient(180deg,#ff7b6b,#e74c3c)}.placeholder-token.blue{background:linear-gradient(180deg,#5bb8ff,#3498db)}.placeholder-token.green{background:linear-gradient(180deg,#63e68e,#2ecc71)}.placeholder-token.yellow{background:linear-gradient(180deg,#ffe36b,#f1c40f)}.game-piece.green{background:linear-gradient(180deg,#63e68e,#2ecc71);box-shadow:0 6px 14px #2ecc7147}.game-piece.yellow{background:linear-gradient(180deg,#ffe36b,#f1c40f);box-shadow:0 6px 14px #f1c40f47}.piece-text{font-size:14px;font-weight:700;color:#fffffff2;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.35)}.home-tokens-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:6px;border-radius:10px;z-index:200;justify-items:center;align-items:center}.pawn-circle{width:28px;height:28px;border-radius:50%;background-color:#fff;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;box-shadow:0 4px 10px #0000001f;z-index:210}.home-tokens-container.red{background-color:#f003}.home-tokens-container.green{background-color:#0f03}.home-tokens-container.yellow{background-color:#ff03}.home-tokens-container.blue{background-color:#00f3}.home-triangle-wrapper{--cell-size: 40px;--wrapper-size: calc(var(--cell-size) * 3);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--wrapper-size);height:var(--wrapper-size);z-index:60;pointer-events:none}.home-triangle{position:absolute}.home-red{top:0;left:0;width:100%;height:50%;background:#ff6f61;clip-path:polygon(0% 0%,100% 0%,50% 100%)}.home-green{top:0;right:0;width:50%;height:100%;background:#7ed957;clip-path:polygon(100% 0%,0% 50%,100% 100%)}.home-yellow{bottom:0;left:0;width:100%;height:50%;background:#ffe066;clip-path:polygon(0% 100%,100% 100%,50% 0%)}.home-blue{top:0;left:0;width:50%;height:100%;background:#4fc3f7;clip-path:polygon(0% 0%,100% 50%,0% 100%)}.home-center-diamond{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:calc(var(--wrapper-size) / 8);height:calc(var(--wrapper-size) / 8);background:#222;z-index:70;pointer-events:none}.board-container{display:flex;flex-direction:column;align-items:center;gap:28px;padding:32px 10px;font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#f8fafc,#e3e9f0);min-height:100vh}.scoreboard{background:#fff;border-radius:14px;box-shadow:0 2px 12px #00000014;padding:18px 32px;margin-bottom:10px;min-width:260px;text-align:center}.scoreboard h3{margin-bottom:10px;color:#1976d2;font-size:1.3rem}.scoreboard ul{list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;gap:18px}.scoreboard li{font-size:1.1rem;font-weight:500}.player-name{font-weight:700;margin-right:4px;text-transform:capitalize}.player-name.Red{color:#d32f2f}.player-name.Green{color:#388e3c}.player-name.Yellow{color:#fbc02d}.player-name.Blue{color:#1976d2}.board{display:grid;grid-template-columns:repeat(15,40px);grid-template-rows:repeat(15,40px);background-color:#333;border:6px solid #222;border-radius:18px;box-shadow:0 4px 24px #00000021;position:relative;overflow:visible}.cell{width:40px;height:40px;background-color:#fff;border:1px solid #cfd8dc;box-sizing:border-box;position:relative;transition:background .2s}.blue-zone{background-color:#4fc3f7}.red-zone{background-color:#ff6f61}.green-zone{background-color:#7ed957}.yellow-zone{background-color:#ffe066}.path{background-color:#f1f1f1;border:1px solid #cfd8dc;z-index:0}.center-path{background-color:#bbb}.center-cell{position:relative;width:40px;height:40px;background:#fff;overflow:hidden;border:2px solid #222;display:flex;align-items:center;justify-content:center}.ludo-center-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px #222;display:flex;align-items:center;justify-content:center}.triangle{position:absolute;width:0;height:0}.triangle-red{top:-8px;left:50%;transform:translate(-50%) rotate(0);border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #ff6f61}.triangle-yellow{bottom:-8px;left:50%;transform:translate(-50%) rotate(180deg);border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #ffe066}.triangle-blue{left:-8px;top:50%;transform:translateY(-50%) rotate(-90deg);border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #4fc3f7}.triangle-green{right:-8px;top:50%;transform:translateY(-50%) rotate(90deg);border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #7ed957}.cell .home-tokens-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.home-tokens-container{width:80px;height:80px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:8px;border-radius:10px;z-index:2;justify-content:center;align-items:center;position:absolute;background:#ffffffb3;box-shadow:0 2px 8px #00000012}.pawn-circle{width:28px;height:28px;border-radius:50%;background-color:#fff;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;position:static;box-shadow:0 1px 4px #00000014}.home-tokens-container.red{background-color:#ff6f612e}.home-tokens-container.green{background-color:#7ed9572e}.home-tokens-container.blue{background-color:#4fc3f72e}.home-tokens-container.yellow{background-color:#ffe0662e}.red-home-path{background-color:#ff6f61!important;border:2px solid #d32f2f;z-index:1}.green-home-path{background-color:#7ed957!important;border:2px solid #388e3c;z-index:1}.yellow-home-path{background-color:#ffe066!important;border:2px solid #fbc02d;z-index:1}.blue-home-path{background-color:#4fc3f7!important;border:2px solid #1976d2;z-index:1}.control-buttons{display:flex;flex-direction:row;align-items:center;gap:28px;margin:28px 0 10px;justify-content:center;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000012;padding:16px 24px}.end-turn-wrapper{display:flex;align-items:center;justify-content:center}.end-turn-btn{font-size:1.2rem;padding:.7rem 1.5rem;background-color:#ff9800;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 6px #00000026;transition:background .2s}.end-turn-btn:hover{background-color:#e65100}.toggle-instructions{font-size:1.1rem;padding:.6rem 1.3rem;background-color:#1976d2;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:10px;box-shadow:0 2px 6px #0000001f;transition:background .2s,transform .1s}.toggle-instructions:hover{background-color:#0d47a1;transform:scale(1.05)}.dice-roll-info{display:flex;flex-direction:column;align-items:center;margin-right:18px;font-size:1.1rem;font-weight:500;color:#333}.dice-roll-label{font-size:.95rem;color:#666}.dice-roll-count{font-size:1.5rem;font-weight:700;color:#1976d2;margin-top:2px}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Poppins,sans-serif;background:linear-gradient(to bottom right,#f8f8f8,#e0e0e0);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:20px;color:#333}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;transition:all .2s ease;border:none;border-radius:6px;background-color:#444;color:#fff;padding:10px 18px;font-weight:600}button:hover{background-color:#222;transform:scale(1.05)}#root,.App{width:100%;max-width:1200px}.flex-center{display:flex;align-items:center;justify-content:center}.glow{animation:glowPulse 1.5s infinite ease-in-out}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(to bottom,#fff,#f0f0f0)}.title{font-size:2.5rem;font-weight:700;margin-bottom:2rem;@keyframes glowPulse{0%{box-shadow:0 0 5px #fff3}50%{box-shadow:0 0 15px #fffc}to{box-shadow:0 0 5px #fff3}}}.title html,.title body{font-family:Poppins,sans-serif;background:linear-gradient(to bottom right,#f8f8f8,#e0e0e0);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:20px;color:#333}.title a{color:inherit;text-decoration:none}.title button{font-family:inherit;cursor:pointer;transition:all .2s ease;border:none;border-radius:6px;background-color:#444;color:#fff;padding:10px 18px;font-weight:600}.title button:hover{background-color:#222;transform:scale(1.05)}.title #root,.title .App{width:100%;max-width:1200px}.title .flex-center{display:flex;align-items:center;justify-content:center}.title .glow{animation:glowPulse 1.5s infinite ease-in-out}@media (max-width: 768px){.title body{padding:10px}.title button{padding:8px 14px;font-size:14px}}