*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app{max-width:1200px;margin:0 auto;padding:2rem}.header{text-align:center;color:#fff;margin-bottom:3rem}.header h1{text-shadow:2px 2px 4px #0000004d;margin-bottom:.5rem;font-size:3rem}.header p{opacity:.9;font-size:1.2rem}.type-grid{grid-template-columns:repeat(6,1fr);gap:1.5rem;padding:1rem;display:grid}.type-card{cursor:pointer;border:none;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;min-height:160px;padding:2rem 1rem;font-family:inherit;transition:all .3s;display:flex;box-shadow:0 4px 6px #0000001a}.type-card:hover{transform:translateY(-8px);box-shadow:0 12px 20px #0003}.type-card:active{transform:translateY(-4px)}.type-icon-wrapper{filter:drop-shadow(2px 2px 3px #0003);color:#fff;margin-bottom:.75rem}.type-name{color:#fff;text-shadow:1px 1px 2px #0000004d;text-transform:uppercase;letter-spacing:1px;font-size:1.5rem;font-weight:700}@media (width<=768px){.app{padding:1rem}.header h1{font-size:2rem}.header p{font-size:1rem}.type-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}.type-card{min-height:100px;padding:1rem .5rem}.type-icon-wrapper{margin-bottom:.5rem}.type-icon-wrapper img{width:40px;height:40px}.type-name{font-size:.9rem}}@media (width>=480px) and (width<=768px){.type-grid{grid-template-columns:repeat(4,1fr)}}.type-detail{color:#fff;min-height:100vh;padding:2rem;position:relative}.back-button{color:#fff;cursor:pointer;background:#0000004d;border:2px solid #ffffff80;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:inherit;font-size:1.1rem;font-weight:600;transition:all .3s;display:flex;position:absolute;top:2rem;left:2rem;box-shadow:0 2px 4px #0003}.back-button .arrow{font-size:1.5rem;line-height:1}.back-button:hover{background:#00000080;border-color:#fffc;transform:translate(-4px);box-shadow:0 4px 8px #0000004d}.back-button:active{transform:translate(-2px)}.type-detail-header{flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:3rem;display:flex}.type-detail-header h1{text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px #0000004d;margin:0;font-size:3.5rem}.type-sections{flex-direction:column;gap:2rem;max-width:1200px;margin:0 auto;display:flex}.type-section{background:#0003;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000001a}.type-section h2{text-transform:uppercase;letter-spacing:1px;margin:0 0 .5rem;font-size:2rem}.section-description{opacity:.9;margin:0 0 1.5rem;font-size:1.1rem}.type-badges{flex-wrap:wrap;gap:1rem;display:flex}.type-badge{border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1.25rem;transition:transform .2s;display:flex;box-shadow:0 2px 4px #0003}.type-badge.clickable{cursor:pointer}.type-badge.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.type-badge.clickable:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.type-badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.type-badge span{text-shadow:1px 1px 2px #0000004d;font-size:1.1rem;font-weight:600}.no-effect-badge{opacity:.8;border:2px solid #ffffff80}.no-types{opacity:.7;margin:0;font-style:italic}@media (width<=768px){.type-detail{padding:1rem}.back-button{padding:.4rem .8rem;font-size:.95rem;top:.75rem;left:.75rem}.back-button .arrow{font-size:1.2rem}.type-detail-header{gap:.75rem;margin-bottom:1.25rem}.type-detail-header h1{font-size:2rem}.type-detail-header .type-icon-wrapper img{width:60px;height:60px}.type-sections{gap:1rem}.type-section{padding:1rem}.type-section h2{margin-bottom:.25rem;font-size:1.3rem}.section-description{margin-bottom:.75rem;font-size:.9rem}.type-badges{gap:.4rem}.type-badge{padding:.4rem .6rem}.type-badge .type-icon-wrapper img{width:24px;height:24px}.type-badge span{font-size:.9rem}}