@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-color:#0f172a;--text-color:#f8fafc;--board-bg:#cbd5e1;--red-color:#ef4444;--red-dark:#b91c1c;--green-color:#22c55e;--green-dark:#15803d;--yellow-color:#eab308;--yellow-dark:#a16207;--blue-color:#3b82f6;--blue-dark:#1d4ed8;--cell-size:min(4vw, 30px);--board-size:calc(var(--cell-size) * 15)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;display:flex;overflow:hidden}.app-container{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:1200px;padding:2rem;display:flex}.header{text-align:center;width:100%;position:relative}.header-game{justify-content:center;align-items:center;display:flex}.back-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:999;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:.6rem 1.2rem;font-weight:600;transition:all .3s;position:fixed;top:15px;left:15px;transform:none}.back-btn:hover{background:#fff3;box-shadow:0 4px 12px #0000004d}.header h1{letter-spacing:4px;background:linear-gradient(to right, var(--red-color), var(--blue-color), var(--yellow-color), var(--green-color));color:#0000;text-shadow:0 4px 10px #00000080;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:800}.status-text{color:#94a3b8;height:1.5rem;font-size:1.1rem;font-weight:300}.game-area{justify-content:center;align-items:center;gap:3rem;width:100%;display:flex}.players-left,.players-right{gap:var(--board-size);gap:calc(var(--board-size) - 160px);flex-direction:column;display:flex}.player-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.5;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:1rem;width:180px;padding:1rem;transition:all .3s;display:flex}.player-info.active{opacity:1;transform:scale(1.05);box-shadow:0 0 20px #ffffff1a}.player-info.red{border-left:4px solid var(--red-color)}.player-info.green{border-left:4px solid var(--green-color)}.player-info.yellow{border-left:4px solid var(--yellow-color)}.player-info.blue{border-left:4px solid var(--blue-color)}.avatar{background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.player-info.red .avatar{color:var(--red-color);background:#ef444433}.player-info.green .avatar{color:var(--green-color);background:#22c55e33}.player-info.yellow .avatar{color:var(--yellow-color);background:#eab30833}.player-info.blue .avatar{color:var(--blue-color);background:#3b82f633}.details .name{font-size:1.1rem;font-weight:600}.board-container{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:1rem;box-shadow:0 25px 50px -12px #00000080}.ludo-board{grid-template-columns:repeat(15, var(--cell-size));grid-template-rows:repeat(15, var(--cell-size));width:var(--board-size);height:var(--board-size);background-color:var(--board-bg);border-radius:8px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0003}.cell-wrapper{border:1px solid #0000001a;width:100%;height:100%;position:relative}.ludo-cell{background-color:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.path-cell{background-color:#fff}.safe-cell{background-color:#f1f5f9}.safe-star{color:#94a3b8;opacity:.5}.red-path{background-color:var(--red-color)}.green-path{background-color:var(--green-color)}.yellow-path{background-color:var(--yellow-color)}.blue-path{background-color:var(--blue-color)}.home-zone{z-index:1;width:100%;height:100%;position:absolute}.home-zone.red-home{background-color:var(--red-color)}.home-zone.green-home{background-color:var(--green-color)}.home-zone.yellow-home{background-color:var(--yellow-color)}.home-zone.blue-home{background-color:var(--blue-color)}.start-pos-cell{z-index:2;background-color:#fff;border-radius:50%;transform:scale(.6);box-shadow:inset 0 0 10px #0000004d}.center-home{background-color:#0000}.center-triangles{top:calc(var(--cell-size) * 6);left:calc(var(--cell-size) * 6);width:calc(var(--cell-size) * 3);height:calc(var(--cell-size) * 3);z-index:0;position:absolute}.triangle{border-style:solid;width:0;height:0;position:absolute}.triangle-top{border-width:calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5) 0 calc(var(--cell-size) * 1.5);border-color:var(--green-color) transparent transparent transparent;top:0;left:0}.triangle-right{border-width:calc(var(--cell-size) * 1.5) 0 calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5);border-color:transparent transparent transparent var(--yellow-color);top:0;right:0}.triangle-bottom{border-width:0 calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5);border-color:transparent transparent var(--blue-color) transparent;bottom:0;left:0}.triangle-left{border-width:calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 1.5) 0;border-color:transparent var(--red-color) transparent transparent;top:0;left:0}.tokens-container{z-index:10;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.ludo-token{width:calc(var(--cell-size) * .7);height:calc(var(--cell-size) * .7);cursor:pointer;z-index:20;border-radius:50%;justify-content:center;align-items:center;transition:all .1s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;box-shadow:0 4px 6px #0006,inset 0 -4px 4px #0003,inset 0 4px 4px #fff6}.token-inner{background:#ffffff4d;border-radius:50%;width:40%;height:40%;box-shadow:inset 0 2px 2px #ffffff80}.token-red{background:radial-gradient(circle at 30% 30%, #f87171, var(--red-dark))}.token-green{background:radial-gradient(circle at 30% 30%, #4ade80, var(--green-dark))}.token-yellow{background:radial-gradient(circle at 30% 30%, #fde047, var(--yellow-dark))}.token-blue{background:radial-gradient(circle at 30% 30%, #60a5fa, var(--blue-dark))}.controls{justify-content:center;margin-top:2rem;display:flex}.dice-container{flex-direction:column;align-items:center;display:flex;position:relative}.dice{cursor:pointer;z-index:2;color:#334155;background:linear-gradient(135deg,#fff,#e2e8f0);border:none;border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;transition:all .2s;display:flex;position:relative;box-shadow:0 10px 20px #0000004d,inset 0 -4px 8px #0000001a,inset 0 4px 8px #fffc}.dice:active:not(.disabled){transform:translateY(4px);box-shadow:0 5px 10px #0000004d,inset 0 -2px 4px #0000001a,inset 0 2px 4px #fffc}.dice.disabled{cursor:not-allowed;opacity:.7}.dice.rolling{animation:.5s linear roll}@keyframes roll{0%{transform:rotate(0)scale(1)}25%{transform:rotate(90deg)scale(1.1)}50%{transform:rotate(180deg)scale(1.1)}75%{transform:rotate(270deg)scale(1.1)}to{transform:rotate(360deg)scale(1)}}.dice-container.red .dice{border:2px solid var(--red-color);box-shadow:0 10px 30px #ef444466,inset 0 -4px 8px #0000001a}.dice-container.green .dice{border:2px solid var(--green-color);box-shadow:0 10px 30px #22c55e66,inset 0 -4px 8px #0000001a}.dice-container.yellow .dice{border:2px solid var(--yellow-color);box-shadow:0 10px 30px #eab30866,inset 0 -4px 8px #0000001a}.dice-container.blue .dice{border:2px solid var(--blue-color);box-shadow:0 10px 30px #3b82f666,inset 0 -4px 8px #0000001a}.dot{background:#1e293b;border-radius:50%;width:16px;height:16px;position:absolute;box-shadow:inset 0 2px 4px #00000080}.dot.center{top:50%;left:50%;transform:translate(-50%,-50%)}.dot.top-left{top:16%;left:16%}.dot.top-right{top:16%;right:16%}.dot.bottom-left{bottom:16%;left:16%}.dot.bottom-right{bottom:16%;right:16%}.dot.mid-left{top:50%;left:16%;transform:translateY(-50%)}.dot.mid-right{top:50%;right:16%;transform:translateY(-50%)}@media (width<=900px){.game-area{flex-direction:column;gap:1.5rem}.players-left,.players-right{flex-direction:row;justify-content:center;gap:1rem;width:100%}.player-info{width:140px;padding:.5rem}.details .name{font-size:.9rem}}.setup-menu{justify-content:center;align-items:center;min-height:100vh}.menu-options{flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:3rem;display:flex}.menu-options button{cursor:pointer;color:#fff;-webkit-backdrop-filter:blur(10px);letter-spacing:1px;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid #fff3;border-radius:50px;padding:1.2rem 3rem;font-size:1.4rem;font-weight:800;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 8px 32px #0000004d}.menu-options button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:all .4s;position:absolute;top:0;left:-100%}.menu-options button:hover{background:linear-gradient(135deg,#ffffff26,#ffffff1a);border-color:#ffffff80;transform:translateY(-5px)scale(1.05);box-shadow:0 15px 35px #00000080}.menu-options button:hover:before{left:100%}.menu-options button:active{transform:translateY(2px)scale(.95)}.menu-options button:first-child:hover{border-color:var(--red-color);box-shadow:0 15px 35px #ef444466}.menu-options button:nth-child(2):hover{border-color:var(--green-color);box-shadow:0 15px 35px #22c55e66}.menu-options button:nth-child(3):hover{border-color:var(--blue-color);box-shadow:0 15px 35px #3b82f666}.online-setup{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;gap:1.5rem;margin-top:0;padding:3rem;display:flex}.room-code{letter-spacing:5px;color:var(--yellow-color);background:#0000004d;border:1px dashed #ffffff4d;border-radius:12px;padding:1rem 3rem;font-size:3rem;font-weight:800}.code-input{text-align:center;letter-spacing:1px;text-transform:uppercase;background:#ffffffe6;border:none;border-radius:12px;outline:none;width:250px;padding:1rem;font-size:20px;font-weight:400;box-shadow:inset 0 4px 6px #0000001a}.online-setup button{cursor:pointer;background:var(--green-color);color:#fff;border:none;border-radius:50px;padding:1rem 3rem;font-size:1.2rem;font-weight:800;transition:all .3s;box-shadow:0 8px 20px #22c55e66}.online-setup button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #22c55e99}.online-setup button:disabled{cursor:not-allowed;box-shadow:none;opacity:.7;background:#64748b}.online-setup .back-btn{color:#fff;box-shadow:none;background:#ffffff1a;border:1px solid #fff3}.error-text{color:var(--red-color);font-weight:600}@media (width>=769px){.back-btn-mobile{position:fixed;top:15px;left:15px;transform:none}}.dice:disabled,.dice.disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}@media (width<=768px){:root{--cell-size:calc((100vw - 30px) / 15)}body{width:100%;height:100%;position:fixed;overflow:hidden}#root{width:100%}.app-container{justify-content:space-evenly;height:100dvh;padding:15px 0;overflow:hidden}.app-container.setup-menu{justify-content:flex-start;height:auto;min-height:100dvh;position:relative;overflow-y:auto}.header.header-game{display:none}.header.header-game .back-btn,.back-btn-mobile{z-index:999;padding:.4rem .8rem;font-size:.9rem;position:fixed!important;top:15px!important;left:15px!important;transform:none!important}.game-area{box-sizing:border-box;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding-top:30px;padding-left:15px;padding-right:15px}.board-container{box-sizing:border-box;border:none;border-radius:12px;width:100%;padding:0}.ludo-board{width:var(--board-size);height:var(--board-size);grid-template-columns:repeat(15, var(--cell-size));grid-template-rows:repeat(15, var(--cell-size))}.players-left,.players-right{width:100%;max-width:calc(var(--cell-size) * 15 + 16px);flex-direction:row;justify-content:space-between;gap:.5rem}.player-info{flex:1;gap:.4rem;width:auto;padding:.4rem}.player-info .avatar{width:25px;height:25px}.player-info .player-details p{font-size:.75rem}.player-info .player-details p:last-child{display:none}.controls{margin-top:.5rem}.dice{width:72px;height:72px}.dice .dot{width:10px;height:10px}.setup-menu .menu-options>div{align-items:stretch;width:100%;max-width:300px;margin:0 auto;flex-direction:column!important;gap:.8rem!important}.menu-options button,.online-setup button{font-size:18px;font-weight:500}.code-input{font-size:16px;font-weight:500}.header h1{font-size:30px;font-weight:700}.online-setup{box-sizing:border-box;width:90%;max-width:100%;padding:1rem}.room-code{padding:.5rem 1.5rem;font-size:1.8rem}.code-input{box-sizing:border-box;width:100%;font-size:1.2rem}}