@import "https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap";:root{--card:#fffaf3;--bg:#fff3e0;--text:#2b1b0f;--muted:#6b5b4c;--border:#e6c8a8;--accent-red:#d7263d;--accent-yellow:#ffd166;--accent-blue:#1b9aaa;--accent-purple:#6c5ce7}*{box-sizing:border-box}body{color:var(--text);background:var(--bg);margin:0;font-family:system-ui,-apple-system,Hiragino Sans,sans-serif}.top{max-width:900px;margin:0 auto;padding:20px 16px 10px}.top h1{clip:rect(0 0 0 0);width:1px;height:1px;margin:0 0 10px;font-family:Mochiy Pop P One,Hiragino Sans,sans-serif;font-size:22px;position:absolute;overflow:hidden}.top-link-wrap{max-width:900px;margin:10px auto 0;padding:0 16px}.top-link{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;text-decoration:none;display:inline-block}.thumbnail-top{border:3px solid var(--accent-red);border-radius:16px;width:min(100%,520px);margin:0 auto 12px;display:block;box-shadow:0 10px 24px #0000001f}.thumbnail-hero{border:3px solid var(--accent-red);border-radius:18px;width:min(100%,560px);margin:16px auto 12px;display:block;box-shadow:0 10px 24px #0000001f}.nav{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.nav a{border:2px solid var(--accent-red);color:#111;background:#fff;border-radius:999px;padding:10px 12px;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 3px #d7263d33}.nav a:hover{transform:translateY(-2px);box-shadow:0 6px #d7263d33}.nav a.active{font-weight:700}.card{background:var(--card);border:3px solid var(--accent-red);border-radius:22px;max-width:900px;margin:10px auto 40px;padding:18px;position:relative;overflow:hidden;box-shadow:0 12px 30px #00000014}.card>h1{text-align:center}.card:before{content:none}body.page-enter .card,body.page-enter .top{animation:.35s ease-out pageFadeIn}.progress{color:var(--muted);text-align:center;margin:0 0 10px}.qtext{margin:0 0 12px;font-size:18px;line-height:1.4}.choices{gap:12px;display:grid}.choice{text-align:left;border:2px solid var(--accent-blue);cursor:pointer;background:#fff;border-radius:14px;width:100%;padding:14px;font-size:16px;line-height:1.4;transition:transform .15s,box-shadow .15s,border-color .15s}.choice:hover{border-color:var(--accent-red);transform:translateY(-2px);box-shadow:0 6px 16px #00000014}.choice:active{transform:scale(.99)}.hidden{display:none}.question-animate{animation:.25s ease-out questionPop}.result-lead{color:var(--muted);text-align:center;margin:8px 0 6px}#resultTitle{text-align:center}.best-desc{display:none}.best-name{display:none!important}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.actions-center{justify-content:center;margin-top:16px}.actions-late{margin-top:28px}.actions-bottom{margin-top:44px}.actions-below-detail{margin-top:18px}.btn{border:2px solid var(--accent-red);background:var(--accent-red);color:#fff;cursor:pointer;border-radius:14px;padding:12px 14px;font-size:16px;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-block;box-shadow:0 4px #d7263d59}.btn:hover{transform:translateY(-2px);box-shadow:0 7px #d7263d59}.btn.ghost{color:#111;border-color:var(--accent-blue);background:#fff;box-shadow:0 4px #1b9aaa40}.btn.accent{background:var(--accent-blue);border-color:var(--accent-blue);box-shadow:0 4px #1b9aaa59}.btn.accent:hover{box-shadow:0 7px #1b9aaa59}.character-detail-card{margin-top:24px;animation:.4s ease-in fadeIn}#result.result-animate .best-name{text-shadow:0 2px #d7263d40;animation:.45s ease-out resultPop}#result.result-animate .best-desc{animation:.5s ease-out resultFade}#result.result-waiting .best-name,#result.result-waiting .best-desc{opacity:0;height:0;margin:0;overflow:hidden}#result.result-waiting .result-lead:after{content:"";background:var(--accent-red);border-radius:50%;width:10px;height:10px;margin-left:8px;animation:1s ease-in-out infinite dotPulse;display:inline-block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes resultPop{0%{opacity:0;transform:scale(.98)translateY(6px)}60%{opacity:1;transform:scale(1.02)translateY(0)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes resultFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes dotPulse{0%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}to{opacity:.4;transform:scale(.8)}}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes questionPop{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.character-card{border:2px solid var(--accent-purple);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px #00000014}.character-card-header{background:var(--accent-red);color:#fff;text-align:center;padding:20px}.character-card-header h3{margin:0 0 4px;font-family:Mochiy Pop P One,Hiragino Sans,sans-serif;font-size:24px}.character-name-en{opacity:.9;margin:0;font-size:14px}.character-card-body{padding:20px}.character-image{text-align:center;margin-bottom:20px}.character-image img{object-fit:cover;border-radius:12px;max-width:100%;height:auto;max-height:400px}.character-info h4{color:var(--accent-red);margin:16px 0 8px;font-size:16px}#sectionTitle{color:var(--text);margin:6px 0 18px;font-family:Mochiy Pop P One,Hiragino Sans,sans-serif;font-size:32px}.character-item-content h3{color:var(--text);margin:0 0 6px;font-family:Mochiy Pop P One,Hiragino Sans,sans-serif;font-size:20px}.character-info h4:first-child{margin-top:0}.character-info p{color:var(--text);margin:0 0 12px;line-height:1.7}.characters-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px;display:grid}.character-item{border:2px solid var(--accent-blue);cursor:pointer;background:#fff;border-radius:14px;transition:transform .2s,box-shadow .2s;overflow:hidden}.character-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.character-item-image{aspect-ratio:4/3;background:#f0f0f0;justify-content:center;align-items:center;width:100%;display:flex;overflow:visible}.character-item-image img{object-fit:contain;width:100%;height:100%;display:block}.character-item-content{padding:16px}.character-item-content h3{margin:0 0 4px;font-size:18px}.character-item-content .name-en{color:var(--muted);margin:0 0 8px;font-size:13px}.character-item-content p{color:var(--text);margin:0;font-size:14px;line-height:1.6}.mv-box{border:2px dashed var(--accent-red);color:var(--muted);background:#fff;border-radius:12px;margin-top:12px;padding:14px}