:root{--red:#ef4444;--green:#22c55e;--yellow:#eab308;--blue:#3b82f6;--bg-color:#1e293b;--text-color:#f8fafc;--board-bg:#f8fafc;--path-bg:#e2e8f0;--safe-bg:#cbd5e1}body{background-color:var(--bg-color);color:var(--text-color);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex}input,textarea{-webkit-user-select:auto;user-select:auto}.app-container{box-sizing:border-box;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100vh;padding:10px;display:flex;overflow-y:auto}.board-container{background-color:var(--board-bg);border:4px solid #334155;border-radius:12px;grid-template-rows:repeat(15,1fr);grid-template-columns:repeat(15,1fr);width:min(100vw - 40px,55vh,600px);height:min(100vw - 40px,55vh,600px);display:grid;position:relative;overflow:hidden;box-shadow:0 10px 25px #00000080}.base{border:1px solid #94a3b8;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:15%;padding:15%;display:grid}.base-red{background-color:var(--red);grid-area:1/1/7/7}.base-green{background-color:var(--green);grid-area:1/10/7/16}.base-yellow{background-color:var(--yellow);grid-area:10/10/16/16}.base-blue{background-color:var(--blue);grid-area:10/1/16/7}.base-spot{background-color:#fff9;border-radius:50%;box-shadow:inset 0 0 6px #0000004d}.home{background-color:#fff;border:1px solid #334155;grid-area:7/7/10/10;position:relative;overflow:hidden}.home-triangle{width:100%;height:100%;position:absolute;top:0;left:0}.home-triangle-top{background-color:var(--green);clip-path:polygon(0 0,100% 0,50% 50%)}.home-triangle-right{background-color:var(--yellow);clip-path:polygon(100% 0,100% 100%,50% 50%)}.home-triangle-bottom{background-color:var(--blue);clip-path:polygon(100% 100%,0 100%,50% 50%)}.home-triangle-left{background-color:var(--red);clip-path:polygon(0 100%,0 0,50% 50%)}.cell{background-color:var(--path-bg);border:1px solid #cbd5e1;justify-content:center;align-items:center;display:flex;position:relative}.pawn{z-index:10;cursor:pointer;border-radius:50%;width:70%;height:70%;transition:all .25s ease-out,transform .2s cubic-bezier(.175,.885,.32,1.275);position:relative;box-shadow:0 4px 6px #0000004d,inset 0 2px 4px #fff6}.pawn:hover{transform:scale(1.1)}.pawn-RED{background-color:var(--red);border:2px solid #991b1b}.pawn-GREEN{background-color:var(--green);border:2px solid #166534}.pawn-YELLOW{background-color:var(--yellow);border:2px solid #854d0e}.pawn-BLUE{background-color:var(--blue);border:2px solid #1e40af}.pawn.selectable{animation:1.5s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.controls{background-color:#334155;border-radius:12px;flex-direction:column;align-items:center;width:100%;max-width:600px;padding:10px 20px;display:flex}.dice-container{gap:15px;margin-bottom:15px;display:flex}.dice{color:#000;cursor:pointer;background-color:#fff;border-radius:10px;justify-content:center;align-items:center;width:60px;height:60px;font-size:2rem;font-weight:700;display:flex;box-shadow:0 4px 10px #0000004d}.dice.rolling{animation:.5s infinite shake}@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(0)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.btn{color:#fff;cursor:pointer;background-color:#475569;border:none;border-radius:6px;padding:10px 20px;font-size:1.1rem;transition:background-color .2s}.btn:hover{background-color:#64748b}.btn:disabled{color:#94a3b8;cursor:not-allowed;background-color:#1e293b}.history{color:#94a3b8;flex-direction:column;gap:4px;width:100%;max-height:100px;margin-top:15px;font-size:.9rem;display:flex;overflow-y:auto}.glass-panel{-webkit-backdrop-filter:blur(12px);background:#1e293bb3;border:1px solid #ffffff14;border-radius:16px;box-shadow:0 25px 50px -12px #00000080}.modern-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding:16px 24px;font-size:1.1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 6px -1px #10b9814d,0 2px 4px -1px #10b98133}.modern-btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #10b98166,0 4px 6px -2px #10b98133}.modern-btn-alt{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 4px 6px -1px #3b82f64d,0 2px 4px -1px #3b82f633}.modern-btn-alt:hover{box-shadow:0 10px 15px -3px #3b82f666,0 4px 6px -2px #3b82f633}.background-glow{z-index:-1;pointer-events:none;background:radial-gradient(circle,#10b9811a 0%,#0f172a00 70%);width:80vw;max-width:800px;height:80vw;max-height:800px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.esport-container{flex-direction:column;gap:20px;width:100%;max-width:800px;animation:.4s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.esport-input{box-sizing:border-box;color:#f8fafc;letter-spacing:1px;background:#0f172acc;border:2px solid #94a3b833;border-radius:12px;outline:none;width:100%;padding:16px;font-family:Space Grotesk,Montserrat,sans-serif;font-size:1.1rem;font-weight:700;transition:all .3s}.esport-input:focus{border-color:#10b981;box-shadow:0 0 15px #10b9814d}.esport-input::placeholder{color:#475569;font-weight:400}.esport-input-alt:focus{border-color:#3b82f6;box-shadow:0 0 15px #3b82f64d}.esport-btn{box-sizing:border-box;text-transform:uppercase;letter-spacing:2px;cursor:pointer;border:none;border-radius:12px;width:100%;padding:16px;font-size:1.1rem;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.esport-btn-primary{color:#fff;background:linear-gradient(90deg,#10b981,#059669);box-shadow:0 4px 15px #10b98166}.esport-btn-primary:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #10b98199}.esport-btn-alt{color:#fff;background:linear-gradient(90deg,#3b82f6,#2563eb);box-shadow:0 4px 15px #3b82f666}.esport-btn-alt:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 25px #3b82f699}.esport-code-display{letter-spacing:10px;color:#f8fafc;text-align:center;text-shadow:0 0 10px #ffffff80;cursor:pointer;background:#00000080;border:1px solid #ffffff1a;border-radius:12px;margin:10px 0;padding:15px 30px;font-family:monospace;font-size:3rem;font-weight:700;transition:all .2s}.esport-code-display:hover{background:#ffffff1a;transform:scale(1.05)}.esport-players-grid{grid-template-columns:repeat(2,1fr);gap:15px;width:100%;display:grid}@media (width<=600px){.esport-players-grid{grid-template-columns:1fr}}.esport-player-card{background:#0f172a99;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:15px;padding:15px;display:flex;position:relative;overflow:hidden}.esport-player-card:before{content:"";width:6px;position:absolute;top:0;bottom:0;left:0}.esport-player-card.green:before{background:var(--green);box-shadow:0 0 10px var(--green)}.esport-player-card.yellow:before{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}.esport-player-card.blue:before{background:var(--blue);box-shadow:0 0 10px var(--blue)}.esport-player-card.red:before{background:var(--red);box-shadow:0 0 10px var(--red)}.esport-player-name{color:#fff;font-size:1.1rem;font-weight:700}.esport-player-empty{color:#64748b;font-size:.9rem;font-style:italic}.lobby-pulse{animation:2s infinite pulse-op}@keyframes pulse-op{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes attackerJump{0%,to{transform:translate(-20px)translateY(0)}40%{transform:translate(-10px)translateY(-25px)scale(1.2)}50%{transform:translate(10px)translateY(0)scale(1.1)}80%{transform:translate(10px)translateY(0)scale(1)}}@keyframes defenderSquash{0%,40%{opacity:1;transform:translate(10px)scale(1)}50%{opacity:0;transform:translate(10px)scale(.5)translateY(10px)}to{opacity:0;transform:translate(10px)scale(0)}}@keyframes capturePow{0%,45%{opacity:0;transform:translate(10px,-10px)scale(0)}50%{opacity:1;transform:translate(10px,-10px)scale(1.5)}70%{opacity:0;transform:translate(10px,-10px)scale(1)}to{opacity:0;transform:translate(10px,-10px)scale(0)}}.match-found-animation{justify-content:center;align-items:center;height:60px;margin-bottom:15px;font-size:2.5rem;display:flex;position:relative}.pawn-attacker{z-index:2;animation:1.5s ease-in-out infinite attackerJump;position:absolute}.pawn-defender{z-index:1;animation:1.5s ease-in-out infinite defenderSquash;position:absolute}.capture-explosion{z-index:3;animation:1.5s ease-out infinite capturePow;position:absolute}.active-emoji-bubble{z-index:100;transform:translateX(var(--x,-50%));filter:drop-shadow(0 2px 4px #00000080);pointer-events:none;font-size:2.2rem;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards bounceEmoji,.5s ease-in 2.5s forwards fadeOutEmoji;position:absolute;top:-40px;left:50%}.emoji-picker-bubble{z-index:101;transform:translateX(var(--x,-50%));white-space:nowrap;background:#fffffff2;border-radius:10px;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;animation:.2s ease-out popIn;display:grid;position:absolute;top:-85px;left:50%;box-shadow:0 4px 15px #0000004d}.emoji-option{cursor:pointer;text-align:center;padding:2px;font-size:1.3rem;transition:transform .1s}.emoji-option:hover{transform:scale(1.3)}.emoji-close{color:#999;cursor:pointer;border-top:1px solid #ccc;grid-column:span 3;justify-content:center;align-items:center;margin-top:1px;padding-top:3px;font-size:.85rem;display:flex}@keyframes bounceEmoji{0%{transform:translateX(var(--x,-50%)) translateY(20px) scale(0)}to{transform:translateX(var(--x,-50%)) translateY(0) scale(1)}}@keyframes fadeOutEmoji{0%{opacity:1;transform:translateX(var(--x,-50%)) translateY(0) scale(1)}to{opacity:0;transform:translateX(var(--x,-50%)) translateY(-20px) scale(.8)}}@keyframes popIn{0%{transform:translateX(var(--x,-50%)) translateY(15px) scale(.5);opacity:0}to{transform:translateX(var(--x,-50%)) translateY(0) scale(1);opacity:1}}