*{margin:0;padding:0;box-sizing:border-box}body{width:100vw;height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}.ranking-board{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;width:90%;max-height:90vh;overflow-y:auto;padding:2rem;background:#003;border:2px solid #ffffff;border-radius:8px;color:#fff;font-family:Arial,sans-serif;z-index:10000;box-shadow:0 0 30px #000c;pointer-events:auto}.close-button{position:absolute;top:1rem;right:1rem;background:transparent;border:2px solid #ffffff;color:#fff;width:32px;height:32px;border-radius:4px;cursor:pointer;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:#fff3;border-color:#ff0;color:#ff0}.ranking-title{font-size:48px;font-weight:700;text-align:center;margin:0 0 2rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.ranking-form{margin-bottom:2rem;padding:1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px}.form-row{display:flex;gap:1rem;margin-bottom:1rem}.ranking-input{flex:1;padding:.75rem;background:#012;border:2px solid #ffffff;border-radius:4px;color:#fff;font-family:Arial,sans-serif;font-size:16px;font-weight:700}.ranking-input::placeholder{color:#ffffff80}.ranking-input:focus{outline:none;border-color:#ff0;background:#013}.ranking-button{width:100%;padding:.875rem;background:#012;border:2px solid #ffff00;border-radius:4px;color:#ff0;font-family:Arial,sans-serif;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s ease}.ranking-button:hover{background:#013;border-color:#ff0;box-shadow:0 0 10px #ffff004d}.ranking-button:active{background:#002}.ranking-button:disabled{background:#012;border-color:#666;color:#666;cursor:not-allowed;opacity:.6}.ranking-button:disabled:hover{background:#012;border-color:#666;box-shadow:none}.ranking-input:disabled{background:#000811;border-color:#666;color:#888;cursor:not-allowed;opacity:.7}.error-text{margin-top:.75rem;padding:.5rem;color:#f44;font-size:14px;text-align:center;font-weight:700}.success-text{margin-top:.75rem;padding:.5rem;color:#4caf50;font-size:14px;text-align:center;font-weight:700}.ranking-list-container{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:1.5rem;min-height:300px;max-height:400px;overflow-y:auto}.loading-text,.empty-text{text-align:center;color:#fff;font-size:18px;font-weight:700;padding:2rem}.ranking-list{list-style:none;padding:0;margin:0}.ranking-item{display:flex;align-items:center;padding:1rem;margin-bottom:.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-weight:700;transition:all .2s ease}.ranking-item:hover{background:#ffffff1a;border-color:#ffff0080}.rank-number{width:50px;font-size:24px;text-align:center;color:#ff0}.rank-name{flex:1;font-size:18px;color:#fff;margin-left:1rem}.rank-score{font-size:20px;color:#ff0;font-weight:700}@media(max-width:768px){.ranking-board{padding:1.5rem;width:95%}.ranking-title{font-size:36px}.form-row{flex-direction:column}.rank-name{font-size:16px}.rank-score{font-size:18px}}