@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Roboto:wght@400;500&display=swap";:root{--bg-dark:#0f111a;--panel-bg:#1a1d2e;--accent-blue:#00d2ff;--accent-blue-glow:#00d2ff66;--accent-red:#f36;--accent-green:#00e676;--text-main:#fff;--text-muted:#8a93ac;--btn-bg:#2a2e45;--btn-active:#3f4566}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);touch-action:none;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Roboto,sans-serif;display:flex;overflow:hidden}#root{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.setup-panel{background-color:var(--panel-bg);text-align:center;border:1px solid #ffffff0d;border-radius:16px;width:90%;max-width:400px;padding:2rem;box-shadow:0 10px 30px #00000080,0 0 20px #00d2ff1a}.setup-panel h2{color:var(--accent-blue);letter-spacing:2px;margin-bottom:2rem;font-family:Orbitron,sans-serif}.input-group{text-align:left;margin-bottom:1.5rem}.input-group label{color:var(--text-muted);margin-bottom:.5rem;font-size:.9rem;display:block}.input-group input{width:100%;color:var(--text-main);background-color:#0003;border:1px solid #ffffff1a;border-radius:8px;outline:none;padding:12px 16px;font-family:Roboto,sans-serif;font-size:1rem}.input-group input:focus{border-color:var(--accent-blue);box-shadow:0 0 10px var(--accent-blue-glow)}.btn{appearance:none;cursor:pointer;text-transform:uppercase;border:none;border-radius:8px;font-family:Orbitron,sans-serif;font-weight:700}.btn.primary{color:#fff;width:100%;box-shadow:0 4px 15px var(--accent-blue-glow);background:linear-gradient(135deg,#00d2ff 0%,#3a7bd5 100%);padding:14px 24px;font-size:1.1rem}.btn.primary:active{box-shadow:0 2px 8px var(--accent-blue-glow);transform:translateY(2px)}.btn.small{background:var(--btn-bg);color:var(--text-main);padding:8px 16px;font-size:.8rem}.status-message{min-height:1.2rem;color:var(--accent-red);margin-top:1rem;font-size:.9rem}.controller-ui{flex-direction:column;width:100%;height:100%;padding:1rem;display:flex}.header{justify-content:flex-end;align-items:center;gap:10px;height:60px;padding:10px;display:flex}.status-indicator{background-color:var(--accent-red);width:10px;height:10px;box-shadow:0 0 8px var(--accent-red);border-radius:50%}.status-indicator.connected{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-text{color:var(--text-muted);letter-spacing:1px;margin-right:auto;font-family:Orbitron,sans-serif;font-size:.8rem}.controls-area{flex-grow:1;justify-content:space-between;align-items:center;padding:0 5%;display:flex}.dpad-container{flex:1;justify-content:flex-start;align-items:center;display:flex}.dpad{background-color:#ffffff05;border-radius:50%;width:180px;height:180px;position:relative;box-shadow:inset 0 0 20px #00000080}.dpad-btn{background:var(--btn-bg);border:none;outline:none;transition:background .1s,box-shadow .1s;position:absolute;box-shadow:inset 0 0 5px #ffffff1a,0 5px 15px #0000004d}.dpad-btn:after{content:"";border-left:10px solid #0000;border-right:10px solid #0000;width:0;height:0;position:absolute}.dpad-btn.up{border-radius:10px 10px 0 0;width:60px;height:60px;top:5px;left:60px}.dpad-btn.up:after{border-bottom:12px solid #ffffff4d;top:15px;left:20px}.dpad-btn.right{border-radius:0 10px 10px 0;width:60px;height:60px;top:60px;right:5px}.dpad-btn.right:after{border:none;border-top:10px solid #0000;border-left:12px solid #ffffff4d;top:20px;left:25px}.dpad-btn.down{border-radius:0 0 10px 10px;width:60px;height:60px;bottom:5px;left:60px}.dpad-btn.down:after{border:10px solid #0000;border-top:12px solid #ffffff4d;border-bottom:none;bottom:15px;left:20px}.dpad-btn.left{border-radius:10px 0 0 10px;width:60px;height:60px;top:60px;left:5px}.dpad-btn.left:after{border:10px solid #0000;border-left:none;border-right:12px solid #ffffff4d;top:20px;left:15px}.dpad-center{background:var(--btn-bg);z-index:10;width:60px;height:60px;position:absolute;top:60px;left:60px}.dpad-btn.active{background:var(--accent-blue);box-shadow:0 0 20px var(--accent-blue-glow)}.dpad-btn.active:after{border-color:#fff}.actions-container{flex:1;justify-content:flex-end;align-items:center;display:flex}.action-buttons{width:200px;height:200px;position:relative;transform:rotate(-15deg)}.action-btn{background:linear-gradient(145deg, var(--btn-bg), #1a1c29);width:65px;height:65px;color:var(--text-main);border:2px solid #ffffff0d;border-radius:50%;justify-content:center;align-items:center;font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;display:flex;position:absolute;box-shadow:5px 5px 15px #00000080,inset 2px 2px 5px #ffffff1a}.action-btn:before{content:"";background:linear-gradient(145deg,#ffffff1a 0%,#0000 100%);border-radius:50%;width:80%;height:80%;position:absolute;top:5%;left:10%}.action-btn.active{transform:scale(.95);box-shadow:inset 5px 5px 15px #00000080}.action-btn.x{top:0;left:67.5px}.action-btn.y{top:67.5px;left:0}.action-btn.b{top:67.5px;right:0}.action-btn.a{bottom:0;left:67.5px}.action-btn.x.active{color:#00d2ff;text-shadow:0 0 10px #00d2ff;border-color:#00d2ff}.action-btn.y.active{color:#00e676;text-shadow:0 0 10px #00e676;border-color:#00e676}.action-btn.a.active{color:#f36;text-shadow:0 0 10px #f36;border-color:#f36}.action-btn.b.active{color:#fc0;text-shadow:0 0 10px #fc0;border-color:#fc0}.center-controls{justify-content:center;gap:30px;height:80px;padding-bottom:20px;display:flex}.system-btn{background:var(--btn-bg);color:var(--text-muted);letter-spacing:2px;border:none;border-radius:20px;padding:8px 24px;font-family:Orbitron,sans-serif;font-size:.8rem;box-shadow:inset 0 2px 5px #ffffff0d,0 5px 10px #0000004d}.system-btn.active{background:var(--btn-active);color:var(--text-main);transform:translateY(2px);box-shadow:inset 0 2px 10px #00000080}@media (orientation:portrait){.controls-area{flex-direction:column;justify-content:space-evenly}.action-buttons{margin-top:40px}}.turn-banner{text-align:center;letter-spacing:1px;border-radius:8px;padding:10px 20px;font-family:Orbitron,sans-serif;font-size:.85rem;animation:2s ease-in-out infinite bannerPulse}.turn-banner.my-turn{color:var(--accent-green);background:linear-gradient(135deg,#00e67626,#00d2ff26);border:1px solid #00e6764d}.turn-banner.waiting{color:var(--text-muted);background:#ffffff08;border:1px solid #ffffff0f;animation:none}@keyframes bannerPulse{0%,to{box-shadow:0 0 10px #00e6761a}50%{box-shadow:0 0 25px #00e67640}}.player-count{color:var(--accent-blue);letter-spacing:1px;background:#00d2ff1a;border-radius:12px;padding:4px 12px;font-family:Orbitron,sans-serif;font-size:.7rem}