:root{--bg-setup:#121212;--card:#1e1e1e;--text:#ffffff;--text-muted:#757575;--accent:#00d2d3;--red:#ff4757;--green:#2ecc71;--yellow:#f1c40f;--blue:#3742fa;--dark:#2f3542;--bg-game:#1e272e;--modal-bg:#1e1e1e}*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:#fff0;outline:none}body{margin:0;font-family:'Poppins','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text);overflow:hidden}body.view-setup{background:var(--bg-setup)}body.view-game{background:radial-gradient(circle at center,#2f3542,#181b21)}.header{text-align:center;margin-bottom:30px}h1{font-weight:300;font-size:32px;margin:0;letter-spacing:2px;text-transform:uppercase}p{margin:5px 0 0;color:var(--text-muted);font-size:14px;text-transform:uppercase}.player-list{width:100%;max-width:680px;display:flex;flex-direction:column;gap:1px;margin-bottom:0}.player-row{display:flex;align-items:center;padding:15px 0;background:#fff0;border-bottom:1px solid #333;transition:0.2s}.player-row.inactive{opacity:.3}.check-box{width:24px;height:24px;border:2px solid #555;margin-right:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.2s}.player-row.active .check-box{border-color:var(--text);background:var(--text);color:var(--bg-setup)}.dot{width:12px;height:12px;border-radius:50%;margin-right:15px}.c-red{background:var(--red)}.c-green{background:var(--green)}.c-yellow{background:var(--yellow)}.c-blue{background:var(--blue)}.input-area{flex:1;position:relative;display:flex;align-items:center;margin-right:15px}input[type="text"]{background:#fff0;border:none;color:var(--text);font-size:16px;width:100%;font-family:inherit;outline:none;padding-right:25px;border-bottom:1px solid #fff0;transition:border-color 0.2s}input[type="text"]:focus{border-bottom-color:var(--accent)}.edit-icon{position:absolute;right:0;color:#555;font-size:12px;pointer-events:none;transition:opacity 0.2s}input[type="text"]:focus+.edit-icon{opacity:0}.player-row.active .input-area:hover .edit-icon{color:var(--text)}.role-wrapper{position:relative}.role-toggle{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;cursor:pointer;padding:5px 8px 5px 12px;color:var(--text-muted);border:1px solid #333;min-width:85px;border-radius:2px;display:flex;align-items:center;justify-content:space-between;transition:0.2s}.role-icon{font-size:10px;color:#555;margin-left:8px}.player-row.active .role-toggle:hover{border-color:#666;color:var(--text)}.player-row.active .role-toggle:hover .role-icon{color:var(--text)}.settings-area{width:100%;max-width:680px;padding:20px 0;margin-top:0;display:flex;align-items:center;justify-content:space-between}.setting-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}select{background:#1e1e1e;color:var(--text);border:1px solid #333;padding:7px 12px;font-family:inherit;outline:none;font-size:12px;cursor:pointer;text-transform:uppercase}.start-btn{margin-top:40px;background:var(--text);color:var(--bg-setup);border:none;padding:15px 60px;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:0.2s}.start-btn:hover{background:#ddd}.start-btn:active{transform:scale(.98)}.top-bar{position:absolute;top:0;left:0;width:100%;height:60px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;z-index:500;pointer-events:none}.timer-display{position:fixed;top:0;left:50%;transform:translate(-50%,16vh);font-size:26px;font-weight:700;color:#fff;letter-spacing:1px;background:rgb(0 0 0 / .5);padding:5px 15px;border-radius:20px;pointer-events:auto}.pause-btn{background:#fff0;color:#fff;margin-top:44px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;cursor:pointer;pointer-events:auto;border:2px solid rgb(255 255 255 / .2);transition:0.2s}.pause-btn:active{background:rgb(255 255 255 / .1);transform:scale(.95)}.pause-btn.disabled{opacity:.6;cursor:pointer;border-color:rgb(255 255 255 / .1)}.board-wrapper{position:relative;padding:40px 10px;transform:translateY(-50px)}.board-container{position:relative;padding:10px;background:rgb(255 255 255 / .95);border-radius:4px;box-shadow:0 50px 100px rgb(0 0 0 / .6)}.ludo-board{width:90vw;max-width:880px;aspect-ratio:1/1;background:#fff;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);border:2px solid #2d3436}.cell{position:relative;border:.5px solid rgb(0 0 0 / .1)}.safe-spot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='rgba(0,0,0,0.15)' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E");background-size:60%;background-repeat:no-repeat;background-position:center}.base{grid-row:span 6;grid-column:span 6;padding:12%;position:relative}.base-box{width:100%;height:100%;background:#fff;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;border:1px solid rgb(0 0 0 / .1)}.base-circle{width:55.5px;height:55.5px;border-radius:50%;background:rgb(0 0 0 / .08);position:relative}.b-red{grid-area:10/1/16/7;background:var(--red)}.b-green{grid-area:1/1/7/7;background:var(--green)}.b-yellow{grid-area:1/10/7/16;background:var(--yellow)}.b-blue{grid-area:10/10/16/16;background:var(--blue)}.center-box{grid-area:7/7/10/10;position:relative;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}.trophy-icon{position:absolute;z-index:10;font-size:48px;color:#ffc300;filter:drop-shadow(0 0 1px rgb(0 0 0 / .5));-webkit-text-stroke:1px #b38f00}.tri{position:absolute;width:0;height:0;border-style:solid;z-index:1}.tri-top{top:0;left:0;border-width:40px 40px 0 40px;border-color:var(--yellow) #fff0 #fff0 #fff0;width:100%}.tri-bottom{bottom:0;left:0;border-width:0 40px 40px 40px;border-color:#fff0 #fff0 var(--red) #fff0;width:100%}.tri-left{top:0;left:0;border-width:40px 0 40px 40px;border-color:#fff0 #fff0 #fff0 var(--green);height:100%}.tri-right{top:0;right:0;border-width:40px 40px 40px 0;border-color:#fff0 var(--blue) #fff0 #fff0;height:100%}.win-area{position:absolute;width:100%;height:35%;z-index:20;pointer-events:none}.wa-0{bottom:0;left:0}.wa-1{top:0;left:0;transform:rotate(-90deg);transform-origin:center;width:35%;height:100%}.wa-2{top:0;left:0}.wa-3{top:0;right:0;transform:rotate(90deg);transform-origin:center;width:35%;height:100%}.token{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 5px rgb(0 0 0 / .3);position:absolute;z-index:50;transition:transform 0.2s cubic-bezier(.34,1.56,.64,1),top 0.2s,left 0.2s;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.token::after{content:'';display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,rgb(255 255 255 / .4) 0%,transparent 100%)}.t-red{background:#d63031}.t-green{background:#00b894}.t-yellow{background:#fdcb6e}.t-blue{background:#0984e3}.token.highlight{animation:bounce 0.8s infinite alternate;box-shadow:0 0 10px #fff,0 0 5px currentColor;z-index:100}.count-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .5);z-index:51;pointer-events:none}.player-status-badge{margin:-18px -2px;position:absolute;background:rgb(30 39 46 / .9);padding:10px 12px;border-radius:4px;display:flex;align-items:center;gap:8px;color:#fff;font-size:20px;border:1px solid rgb(255 255 255 / .05);transition:0.3s;opacity:.6;max-width:600px}.player-status-badge.active{opacity:1;background:#2d3436;border-color:rgb(255 255 255 / .3);box-shadow:0 5px 15px rgb(0 0 0 / .3);z-index:100}.ps-icon{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px}.ps-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.ps-green{top:-40px;left:0}.ps-yellow{top:-40px;right:0}.ps-red{bottom:-40px;left:0}.ps-blue{bottom:-40px;right:0}.controls-area{margin-top:15px;display:flex;flex-direction:column;align-items:center;gap:15px;transition:0.3s}.controls-area.top-pos{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:400}.dice-box{width:100px;height:100px;background:#eee;border-radius:12px;box-shadow:0 6px 0 #bbb,0 15px 20px rgb(0 0 0 / .3);cursor:pointer;transition:transform 0.1s,box-shadow 0.1s;display:flex;align-items:center;justify-content:center;position:relative;transform:translateY(-15px)}.dice-box:active{transform:translateY(4px);box-shadow:0 6px 0 #bbb,0 9px 10px rgb(0 0 0 / .3)}.dice-box.pulse-glow{animation:pulse-border 1.2s infinite}.dice-face{width:100%;height:100%;padding:8px;display:grid;gap:3px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.pip{background:#2d3436;border-radius:50%;align-self:center;justify-self:center;width:16px;height:16px;visibility:hidden;box-shadow:inset 0 1px 2px rgb(0 0 0 / .5)}.face-1 .p5,.face-2 .p1,.face-2 .p9,.face-3 .p1,.face-3 .p5,.face-3 .p9,.face-4 .p1,.face-4 .p3,.face-4 .p7,.face-4 .p9,.face-5 .p1,.face-5 .p3,.face-5 .p5,.face-5 .p7,.face-5 .p9,.face-6 .p1,.face-6 .p3,.face-6 .p4,.face-6 .p6,.face-6 .p7,.face-6 .p9{visibility:visible}.dice-rolling{animation:shake 0.2s infinite}.game-status{font-size:24px;color:rgb(255 255 255 / .9);text-align:center;height:24px;font-weight:300;letter-spacing:1px;text-transform:uppercase;transform:translateY(-40px)}.pop-notification{position:absolute;top:39%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:68px;font-weight:900;color:#fff;text-align:center;text-shadow:3px 3px 0 #000,0 0 20px rgb(0 0 0 / .5);z-index:200;pointer-events:none;white-space:nowrap}.pop-sub{font-size:34px;font-weight:600;display:block;margin-top:5px;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 0 #000}.pop-anim{animation:pop-text 1.6s cubic-bezier(.34,1.56,.64,1) forwards}.modal{position:fixed;inset:0;background:rgb(0 0 0 / .85);z-index:999;display:none;align-items:center;justify-content:center}.modal-content{background:#1e1e1e;color:#fff;padding:40px;border-radius:4px;text-align:center;width:85%;max-width:380px;border:1px solid #333}.modal-transparent{background:#fff0;border:none;box-shadow:none}.pause-menu{display:flex;justify-content:center;gap:40px;margin-top:20px}.pause-icon-btn{background:#fff0;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:57px;color:#fff;cursor:pointer;transition:0.2s;border:2px solid rgb(255 255 255 / .3)}.pause-icon-btn:hover{background:#fff;border-color:#fff;color:#000;transform:translateY(-3px)}.pause-label{font-size:18px;margin-top:10px;text-transform:uppercase;color:#fff;letter-spacing:1px}.win-card{background:var(--modal-bg);border:1px solid #333;border-radius:2px;padding:60px;width:95%;max-width:600px;min-height:500px;text-align:center;box-shadow:0 20px 50px rgb(0 0 0 / .8);display:flex;flex-direction:column;justify-content:center}.win-title{margin:0 0 30px 0;font-weight:600;font-size:32px;letter-spacing:4px;color:var(--yellow);text-transform:uppercase}.rank-list{text-align:left;margin:30px 0;display:flex;flex-direction:column;gap:15px}.rank-item{background:#fff0;padding:15px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;font-size:18px}.rank-pos{font-weight:700;width:30px;font-size:24px}.rank-1 .rank-pos{color:#f1c40f}.rank-2 .rank-pos{color:#bdc3c7}.rank-3 .rank-pos{color:#cd6133}.btn-home{margin-top:30px;background:#fff;color:#121212;border:none;padding:15px 60px;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:0.2s;width:auto!important;align-self:center!important}.btn-home:hover{background:#ddd}.btn-home:active{transform:scale(.98)}.unmute-overlay{position:fixed;inset:0;z-index:1000;background:rgb(0 0 0 / .85);display:flex;align-items:center;justify-content:center;cursor:pointer}.tap-msg{color:rgb(255 255 255 / .7);font-size:36px;letter-spacing:4px;text-transform:uppercase;animation:breathe 2s infinite}#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:900}@keyframes shake{0%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}100%{transform:rotate(15deg)}}@keyframes bounce{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-75%) scale(1.1)}}@keyframes pulse-border{0%{box-shadow:0 0 0 0 rgb(255 255 255 / .4)}70%{box-shadow:0 0 0 25px #fff0}100%{box-shadow:0 0 0 0 #fff0}}@keyframes pulse-border-mobile{0%{box-shadow:0 0 0 0 rgb(255 255 255 / .6)}70%{box-shadow:0 0 0 14px #fff0}100%{box-shadow:0 0 0 0 #fff0}}@keyframes pop-text{0%{transform:translate(-50%,-50%) scale(0);opacity:0;filter:blur(10px)}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1;filter:blur(0)}25%{transform:translate(-50%,-50%) scale(1)}85%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-100%) scale(1.3);opacity:0}}@keyframes breathe{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}@media screen and (max-width:600px){body.view-setup{padding:10px 20px}.header{margin-top:10px;margin-bottom:20px}h1{font-size:26px}.player-list{width:100%;gap:0}.player-row{padding:12px 0}.check-box{width:28px;height:28px}.dot{margin-right:12px}.input-area{margin-right:10px}.input-area input[type="text"]{font-size:14px;padding-right:5px}.role-toggle{min-width:75px;padding:6px 8px;font-size:11px}.settings-area{padding:15px 0}.setting-label{font-size:11px}select{padding:8px 12px;font-size:12px}.start-btn{margin-top:25px;width:auto;padding:12px 50px;font-size:14px}.top-bar{height:60px;padding:0 15px}.timer-display{transform:translateX(-50%);top:15vh;font-size:16px;padding:4px 15px;background:rgb(0 0 0 / .7);z-index:50}.pause-btn{margin-top:20px;width:45px;height:45px;font-size:20px;border-width:1.5px}.board-wrapper{padding:0;transform:none;width:100%;height:auto;min-height:50vh;display:flex;align-items:center;justify-content:center;margin-top:30px;margin-bottom:25px}.ludo-board{width:92vw;max-width:92vw}.base{padding:11%}.base-circle{width:32px;height:32px}.token{width:24.5px;height:24.5px;max-width:none;max-height:none;box-shadow:0 2px 3px rgb(0 0 0 / .3);border-width:1.5px}.count-badge{font-size:12px}.controls-area{margin-top:5px;position:relative;z-index:500;gap:20px}.controls-area.top-pos{top:85px;width:100%;pointer-events:none}.controls-area.top-pos .dice-box{pointer-events:auto;transform:scale(.8)}.dice-box{width:65px;height:65px;border-radius:10px;transform:translateY(0);box-shadow:0 4px 0 #bbb,0 8px 15px rgb(0 0 0 / .3)}.dice-box:active{box-shadow:0 4px 0 #bbb,0 6px 8px rgb(0 0 0 / .3)}.dice-box.pulse-glow{animation:pulse-border-mobile 1.2s infinite}.pip{width:10px;height:10px}.game-status{font-size:14px;height:20px;transform:translateY(0);margin-bottom:0;text-shadow:0 1px 2px rgb(0 0 0 / .8)}.trophy-icon{font-size:28px}.player-status-badge{transform:scale(.65);padding:8px 12px;margin:0;width:auto}.ps-green{top:-50px;left:0;transform-origin:bottom left}.ps-yellow{top:-50px;right:0;transform-origin:bottom right}.ps-red{bottom:-50px;left:0;transform-origin:top left}.ps-blue{bottom:-50px;right:0;transform-origin:top right}.pop-notification{top:42%;font-size:38px}.pop-sub{font-size:18px;margin-top:2px}.modal-content{padding:30px 20px;width:90%}.win-card{padding:30px 20px;min-height:auto}.win-title{font-size:24px;margin-bottom:20px}.rank-item{font-size:14px;padding:12px 0}.rank-pos{font-size:20px}.pause-menu{gap:20px}.pause-icon-btn{width:80px;height:80px;font-size:30px}.pause-label{font-size:12px}.tap-msg{font-size:18px;text-align:center;padding:0 20px;line-height:1.4}h2{font-size:24px!important}.btn-home{padding:12px 30px;font-size:13px;width:auto!important;align-self:center!important}}