:root{--accent:#e040fb;--bg-dark:#0a0e27;--panel-bg:rgba(15, 20, 40, 0.95);--text-main:#ffffff;--text-dim:rgba(255, 255, 255, 0.7);--blue-glow:rgba(100, 181, 246, 0.4)}.board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:1px;width:100%;max-width:500px;aspect-ratio:1;margin:20px auto;background:rgba(0,0,0,.4);border:2px solid rgba(100,181,246,.2);border-radius:12px;box-shadow:0 0 30px rgba(0,0,0,.5),0 0 15px var(--blue-glow)}.cell{width:100%;height:100%;background:rgba(255,255,255,3%);border:1px solid rgba(255,255,255,5%);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.cell.yard{border:none}.cell.yard.red{background:rgba(211,47,47,.25)}.cell.yard.green{background:rgba(56,142,60,.25)}.cell.yard.yellow{background:rgba(251,192,45,.2)}.cell.yard.blue{background:rgba(25,118,210,.25)}.cell.home-track.red{background:rgba(211,47,47,.2)}.cell.home-track.green{background:rgba(56,142,60,.2)}.cell.home-track.yellow{background:rgba(251,192,45,.15)}.cell.home-track.blue{background:rgba(25,118,210,.2)}.cell.goal{background:rgba(255,255,255,8%)}.cell.safe{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');background-size:60%;background-repeat:no-repeat;background-position:50%}.piece-container{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:1px;width:100%;height:100%;position:relative}.piece{width:80%;height:80%;border-radius:50%;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.3);transition:transform .2s;position:relative;flex-shrink:0}.piece.piece-small{width:55%;height:55%;border-width:1.5px}.piece-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.6em;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;line-height:1}.piece.yellow .piece-count{color:#333;text-shadow:0 1px 2px rgba(255,255,255,.5)}.piece.red{background:radial-gradient(circle at 35% 35%,#ef5350,#c62828)}.piece.green{background:radial-gradient(circle at 35% 35%,#66bb6a,#2e7d32)}.piece.yellow{background:radial-gradient(circle at 35% 35%,#ffee58,#f9a825)}.piece.blue{background:radial-gradient(circle at 35% 35%,#42a5f5,#1565c0)}.piece.clickable{cursor:pointer;animation:piecePulse 1.5s infinite}.piece.clickable:hover{transform:scale(1.2);box-shadow:0 0 15px var(--blue-glow)}@keyframes piecePulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}#dice-container{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}#dice-value{font-size:2.5em;font-weight:900;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);border-radius:12px;margin-bottom:10px;background:rgba(255,255,255,5%);color:#fff;text-shadow:0 0 10px var(--blue-glow)}#roll-btn{padding:12px 28px;font-size:1.1em;font-weight:700;background:linear-gradient(135deg,#1976d2 0%,#1565c0 100%);color:#fff;border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 15px rgba(25,118,210,.3);transition:all .2s;text-transform:uppercase;letter-spacing:1px}#roll-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(25,118,210,.4)}#roll-btn:disabled{background:#333;opacity:.5;cursor:not-allowed;box-shadow:none}.player-badge{padding:6px 14px;border-radius:12px;font-size:.95em;margin:0 4px;background:rgba(255,255,255,5%);border:2px solid transparent;font-weight:600;display:inline-flex;align-items:center;gap:6px}.player-badge.active-turn{border-color:rgba(255,255,255,.5);box-shadow:0 0 10px var(--blue-glow)}.player-badge.red{color:#ef5350;border-color:rgba(239,83,80,.3)}.player-badge.green{color:#66bb6a;border-color:rgba(102,187,106,.3)}.player-badge.yellow{color:#ffee58;border-color:rgba(255,238,88,.3)}.player-badge.blue{color:#42a5f5;border-color:rgba(66,165,245,.3)}#player-names{background:rgba(255,255,255,3%);padding:12px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.1);margin-bottom:16px;text-align:center}.results-modal-overlay{position:fixed;inset:0;background:rgba(10,14,39,.9);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .4s ease-out}.results-modal{background:linear-gradient(145deg,rgba(35,38,58,.95),rgba(20,24,40,.98));border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:40px;width:90%;max-width:440px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(100,181,246,.15);animation:slideUp .5s cubic-bezier(.18,.89,.32,1.28)}.results-header{font-size:2.5em;font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(to right,#fff,#90caf9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.results-outcome{font-size:1.1em;color:rgba(255,255,255,.6);margin-bottom:30px}.xp-gain-container{background:rgba(255,255,255,3%);border-radius:16px;padding:20px;margin-bottom:30px;border:1px solid rgba(255,255,255,5%)}.xp-gain-label{display:flex;justify-content:space-between;margin-bottom:12px;font-weight:600;font-size:.95em}.xp-progress-bg{width:100%;height:12px;background:rgba(255,255,255,5%);border-radius:6px;overflow:hidden}.xp-progress-fill{height:100%;background:linear-gradient(90deg,#42a5f5,#00d2ff);border-radius:6px;transition:width 1.5s cubic-bezier(.4,0,.2,1);width:0}.rank-text{margin-top:10px;font-size:.85em;color:rgba(255,255,255,.5)}.results-actions{display:flex;flex-direction:column;gap:12px}.btn-primary,.btn-secondary{padding:14px 24px;border-radius:12px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .2s;border:none}.btn-primary{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff;box-shadow:0 4px 15px rgba(33,150,243,.3)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(33,150,243,.4)}.btn-secondary{background:rgba(255,255,255,5%);color:#fff;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:rgba(255,255,255,.1)}.btn-primary:disabled{background:#333;opacity:.6;cursor:not-allowed;box-shadow:none}.challenge-message{margin-top:-15px;margin-bottom:20px;font-size:.95em;font-weight:600;color:#64b5f6;text-shadow:0 0 10px rgba(100,181,246,.3);animation:fadeIn .3s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.flash-effect{animation:modalFlash .4s ease-out}@keyframes modalFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.02);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}@media(max-width:600px){h1{font-size:1.5em;margin-bottom:16px}.board{max-width:100%}#roll-btn{padding:10px 20px;font-size:1em}}