@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+JP:wght@300;400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body,html{margin:0;padding:0;font-family:Noto Sans JP,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;overflow-x:hidden}.appbody{min-height:100vh;display:flex;flex-direction:column;position:relative}.appbody:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.2) 0%,transparent 50%);z-index:-1;animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(-20px) translateY(-10px)}50%{transform:translate(20px) translateY(10px)}75%{transform:translate(-10px) translateY(20px)}}.nav{display:flex;justify-content:center;align-items:center;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);height:80px;gap:60px;box-shadow:0 8px 32px #0000004d;border-bottom:2px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:1000}.nav>a{color:#fff;font-size:24px;font-weight:700;font-family:Orbitron,monospace;text-decoration:none;padding:12px 24px;border-radius:25px;position:relative;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-transform:uppercase;letter-spacing:1px}.nav>a:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);border-radius:25px;opacity:0;transition:opacity .4s ease;z-index:-1}.nav>a:hover{color:#000;transform:translateY(-3px) scale(1.05);text-shadow:0 0 20px rgba(255,255,255,.8)}.nav>a:hover:before{opacity:1;animation:gradientShift 2s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.footer{height:60px;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;border-top:2px solid rgba(255,255,255,.1);margin-top:auto}.footer p{font-family:Noto Sans JP,sans-serif;font-weight:300}@media (max-width: 768px){.nav{gap:20px;padding:0 20px;flex-wrap:wrap;height:auto;min-height:80px}.nav>a{font-size:18px;padding:8px 16px}}@media (max-width: 480px){.nav{gap:10px}.nav>a{font-size:16px;padding:6px 12px}}.body{min-height:calc(100vh - 140px);padding:40px 20px;display:flex;flex-direction:column;align-items:center;position:relative}.body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.3),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,119,198,.4),transparent),radial-gradient(1px 1px at 90px 40px,rgba(120,219,255,.4),transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.3),transparent);background-repeat:repeat;background-size:200px 100px;animation:sparkle 15s linear infinite;pointer-events:none;z-index:-1}@keyframes sparkle{0%{transform:translateY(0)}to{transform:translateY(-100px)}}.subtitle,.title{display:flex;justify-content:center;align-items:center;text-align:center;margin:20px 0}.subtitle h2{font-size:28px;font-family:Noto Sans JP,sans-serif;color:#ffffffe6;font-weight:300;letter-spacing:2px;text-transform:uppercase;animation:fadeInUp 1s ease-out}.title h1{font-size:80px;font-family:Orbitron,monospace;font-weight:900;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientText 3s ease-in-out infinite,fadeInUp 1.2s ease-out;text-shadow:0 0 30px rgba(255,255,255,.3);margin:0}@keyframes gradientText{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.links{display:flex;justify-content:center;gap:40px;margin-top:50px;flex-wrap:wrap}.links a{padding:16px 32px;font-size:20px;font-family:Orbitron,monospace;font-weight:700;background:linear-gradient(45deg,#ff6b6b33,#4ecdc433);color:#fff;border:2px solid rgba(255,255,255,.3);text-decoration:none;border-radius:50px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.links a:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.links a:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 35px #0000004d;border-color:#fffc;background:linear-gradient(45deg,#ff6b6b66,#4ecdc466)}.links a:hover:before{left:100%}.vtitle,.vsubtitle{text-align:center;margin:20px 0}.vtitle h1{font-size:48px;font-family:Orbitron,monospace;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5);animation:fadeInUp .8s ease-out}.vsubtitle h2{font-size:24px;font-family:Noto Sans JP,sans-serif;color:#fffc;font-weight:300;animation:fadeInUp 1s ease-out}.images{display:flex;justify-content:center;align-items:center;gap:60px;margin-top:40px;flex-wrap:wrap}.image1,.image2{display:flex;flex-direction:column;align-items:center;padding:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.2);border-radius:20px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;position:relative;overflow:hidden;min-width:250px;animation:fadeInUp 1.2s ease-out}.image1:before,.image2:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#ff6b6b1a,#4ecdc41a);opacity:0;transition:opacity .3s ease;z-index:-1}.image1:hover,.image2:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 20px 40px #0000004d;border-color:#fff9}.image1:hover:before,.image2:hover:before{opacity:1}.image1 img,.image2 img{border-radius:15px;width:200px;height:300px;object-fit:cover;transition:all .3s ease;box-shadow:0 10px 25px #0000004d}.image1:hover img,.image2:hover img{transform:scale(1.02);box-shadow:0 15px 35px #0006}.char-name{margin-top:15px;font-weight:700;font-size:18px;font-family:Orbitron,monospace;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);letter-spacing:1px}.or{font-size:36px;font-weight:900;font-family:Orbitron,monospace;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.8);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}.ltitle{text-align:center;margin-bottom:40px}.ltitle h1{font-size:48px;font-family:Orbitron,monospace;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5);animation:fadeInUp .8s ease-out}.leaderboard-list{max-height:60vh;overflow-y:auto;margin:0 auto;width:90%;max-width:800px;padding:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;border:2px solid rgba(255,255,255,.2);box-shadow:0 15px 35px #0000004d}.leaderboard-list::-webkit-scrollbar{width:8px}.leaderboard-list::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}.leaderboard-list::-webkit-scrollbar-thumb{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:10px}.leaderboard-list h3{padding:15px 20px;margin:10px 0;background:#ffffff1a;border-radius:15px;border-left:4px solid #4ecdc4;font-family:Noto Sans JP,sans-serif;font-size:18px;color:#fff;transition:all .3s ease;animation:fadeInUp .6s ease-out;animation-delay:calc(var(--i) * .1s)}.leaderboard-list h3:hover{background:#fff3;transform:translate(10px);border-left-color:#ff6b6b}.leaderboard-list h3:nth-child(1){border-left-color:gold}.leaderboard-list h3:nth-child(2){border-left-color:silver}.leaderboard-list h3:nth-child(3){border-left-color:#cd7f32}@media (max-width: 768px){.title h1{font-size:60px}.images{gap:30px}.image1,.image2{min-width:200px}.image1 img,.image2 img{width:160px;height:240px}.links{gap:20px}.links a{padding:12px 24px;font-size:16px}}@media (max-width: 480px){.title h1{font-size:40px}.subtitle h2{font-size:20px}.images{flex-direction:column;gap:20px}.or{font-size:24px;transform:rotate(90deg)}.leaderboard-list{width:95%;padding:15px}}