:root{--primary: #1a1a2e;--bg: #f3f4f6;--card-bg: #ffffff;--text: #1a1a2e;--text-muted: #6b7280;--border: #e5e7eb;--radius: 14px;--shadow: 0 1px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans JP,Hiragino Sans,Yu Gothic,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}header{background:var(--primary);color:#fff;padding:calc(16px + env(safe-area-inset-top)) 16px 16px;text-align:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px #0000004d}header .sub{font-size:9px;letter-spacing:.1em;color:#9ca3af;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 380px){header .sub{font-size:8px}}header h1{font-size:17px;font-weight:900;line-height:1.3;word-break:keep-all;overflow-wrap:break-word}main{max-width:560px;margin:0 auto;padding:16px 12px 60px}.seo-intro,.seo-section{background:var(--card-bg);border-radius:var(--radius);padding:18px 16px;margin-bottom:16px;box-shadow:var(--shadow);font-family:Noto Sans JP,Hiragino Sans,Yu Gothic,sans-serif;text-align:left}.seo-intro h2,.seo-section h2{font-size:15px;font-weight:800;margin-bottom:10px;color:var(--primary);font-family:inherit}.seo-intro p,.seo-section p{font-size:13px;color:var(--text);line-height:1.8;margin-bottom:8px;font-family:inherit}.seo-intro ul{font-size:12px;color:var(--text-muted);padding-left:20px;line-height:2;font-family:inherit}.faq-item{margin-bottom:14px;font-family:Noto Sans JP,Hiragino Sans,Yu Gothic,sans-serif}.faq-q{font-size:13px;font-weight:800;color:var(--primary);margin-bottom:4px;line-height:1.5}.faq-a{font-size:12px;color:var(--text);line-height:1.8;padding-left:12px;border-left:3px solid var(--border)}.type-grid-wrap{background:var(--card-bg);border-radius:var(--radius);padding:14px 12px;margin-bottom:14px;box-shadow:var(--shadow);border-top:3px solid var(--border);position:relative}.type-grid-wrap:before{content:"";display:block;height:4px;width:40px;background:var(--primary);border-radius:2px;margin-bottom:10px}.type-grid-label{font-size:11px;color:var(--text-muted);font-weight:700;letter-spacing:.1em;margin-bottom:10px}.type-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.type-btn{border-radius:10px;padding:6px 2px 5px;border:1.5px solid var(--border);background:#f8fafc;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .15s;font-family:inherit}.type-btn.active{background:var(--primary);border-color:var(--primary);transform:scale(1.08)}.type-btn .t-emoji{font-size:18px}.type-btn .t-name{font-size:9px;font-weight:700;color:var(--text-muted)}.type-btn.active .t-name{color:#fff;font-weight:800}.type-btn:disabled{opacity:.3;cursor:default}.type-hero{background:var(--primary);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;box-shadow:0 4px 12px #0003;color:#fff}.type-hero .emoji{font-size:38px;line-height:1}.type-hero h2{font-size:18px;font-weight:900}.type-hero .sub{font-size:11px;color:#9ca3af}.type-hero .score{margin-left:auto;text-align:right}.type-hero .score-label{font-size:9px;color:#6b7280}.type-hero .score-val{font-size:22px;font-weight:900;line-height:1.1}.cards{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.card{background:#fff;padding:10px;border-radius:12px;box-shadow:0 2px 12px #0000000f;margin-bottom:10px;cursor:pointer;transition:all .2s;border:none;animation:cardFadeIn .18s ease-out both;scroll-margin-top:200px}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.card:hover{box-shadow:0 4px 20px #0000001a;transform:translateY(-1px)}.card.rank1{box-shadow:0 4px 16px #0000001f}.card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}.medal{font-size:20px;line-height:1;flex-shrink:0}.medal.first{font-size:24px}.poke-name{font-size:16px;font-weight:900;color:#1a1a2e;line-height:1.1}.poke-name.first{font-size:18px}.badges{display:flex;gap:4px;flex-wrap:wrap}.badge{font-size:10px;font-weight:900;padding:1px 8px;border-radius:99px;color:#fff}.hp-row{background:#fff;border:1.5px solid #f1f5f9;border-radius:10px;padding:5px 8px;box-shadow:0 1px 4px #00000003;margin-bottom:4px}.hp-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.star-badge{background:#f1f5f9;color:#64748b;font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.05em}.hit-badge{padding:1px 8px;border-radius:99px;font-size:9px;font-weight:800;border:1.5px solid currentColor}.hp-bar-bg{flex:1;background:#f1f5f9;border-radius:99px;height:6px;overflow:hidden}.hp-bar-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.22,1,.36,1)}.vote-btn-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;border:none;background:#f3f4f6;color:#1a1a2e;font-weight:700;font-size:12px;cursor:pointer;transition:all .1s;font-family:inherit}.vote-btn-pill.active{background:#fde68a}.bbs{background:var(--card-bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 14px}.bbs-form{background:#f9fafb;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px}.bbs-form input,.bbs-form textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;margin-bottom:7px;font-family:inherit}.submit-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:7px 20px;font-size:12px;font-weight:700;cursor:pointer}.submit-btn:disabled{background:var(--border);color:#9ca3af}footer{max-width:560px;margin:20px auto 0;padding:0 12px calc(40px + env(safe-area-inset-bottom));text-align:center}.footer-disclaimer{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);font-size:10px;color:#9ca3af;text-align:center}.footer-x-link{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:#000;color:#fff;text-decoration:none;font-size:14px;font-weight:800;border-radius:99px;box-shadow:0 4px 15px #00000026;transition:all .25s cubic-bezier(.175,.885,.32,1.275);margin:24px 0}.footer-x-link:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #0003;background:#111}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.85}to{opacity:1}}.animate-in{animation:fadeIn .3s ease-out forwards}
