*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:14px}body{color:#2c2c2c;background:#f0eeeb;padding-bottom:52px;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;line-height:1.5}a{color:#3d6e8e;text-decoration:none}a:hover{text-decoration:underline}.app{max-width:860px;margin:0 auto}.app-header{z-index:20;background:#3b4856;padding:12px 16px;position:sticky;top:0}.app-header h1{color:#e8e4df;letter-spacing:.02em;font-size:1rem;font-weight:700}.app-main{padding:10px}.filter-panel{background:#faf9f7;border:1px solid #d8d4cf;border-left:3px solid #6b8a7a;border-radius:3px;flex-direction:column;gap:10px;margin-bottom:10px;padding:12px;display:flex}.filter-group{position:relative}.filter-label{color:#5a5550;margin-bottom:4px;font-size:.8rem;font-weight:600;display:block}.filter-select,.filter-input{appearance:none;background:#fff;border:1px solid #c8c4be;border-radius:3px;width:100%;padding:8px 10px;font-size:1rem}.filter-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M5 6L0 0h10z' fill='%23888'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:28px}.filter-select:focus,.filter-input:focus{border-color:#6b8a7a;outline:none}.rarity-buttons{gap:6px;display:flex}.rarity-button{cursor:pointer;color:#999;background:#fff;border:1px solid #c8c4be;border-radius:3px;flex:1;padding:8px;font-size:.8rem}.rarity-button.active{color:#e8e4df;background:#3b4856;border-color:#3b4856}.character-search-wrapper{position:relative}.clear-button{color:#999;cursor:pointer;background:0 0;border:none;padding:4px;font-size:.9rem;line-height:1;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.character-candidates{z-index:30;background:#fff;border:1px solid #c8c4be;border-radius:3px;max-height:200px;margin-top:2px;list-style:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 3px 8px #0000001a}.candidate-button{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:10px;font-size:.95rem;display:flex}.candidate-button:active{background:#f0eeeb}.candidate-name{color:#2c2c2c;font-weight:600}.candidate-kana{color:#999;font-size:.75rem}.character-candidates li+li{border-top:1px solid #eee}.sort-controls{align-items:center;gap:6px;margin-bottom:8px;padding:0 2px;display:flex}.sort-label{color:#777;white-space:nowrap;font-size:.8rem}.sort-button{cursor:pointer;white-space:nowrap;color:#555;background:#faf9f7;border:1px solid #c8c4be;border-radius:3px;padding:4px 10px;font-size:.8rem}.sort-button.active{color:#e8e4df;background:#3b4856;border-color:#3b4856}.sort-arrow{font-size:.65rem}.table-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #d8d4cf;border-radius:4px;overflow-x:auto}.card-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:540px}.card-table th{color:#5a5550;text-align:center;white-space:nowrap;background:#eae7e2;border-bottom:1px solid #d8d4cf;padding:8px 6px;font-size:.75rem;font-weight:600}.card-table td{vertical-align:middle;border-bottom:1px solid #ece9e5;padding:6px;font-size:.8rem}.card-table tbody tr:hover{background:#f7f5f2}.th-image{text-align:center;width:48px}.th-attribute{text-align:center;width:90px}.th-unit{width:110px}.cell-image{text-align:center;width:44px}.card-image{object-fit:cover;border-radius:2px;width:36px;height:45px}.card-link-placeholder{font-size:1.2rem}.card-link-placeholder a{text-decoration:none}.cell-card-name{text-align:center;font-size:.78rem;line-height:1.3}.card-name{font-weight:600}.card-name a{color:#3d6e8e}.cell-song{color:#444;text-align:center;font-size:.78rem}.card-meta{color:#999;margin-top:1px;font-size:.7rem}.cell-attribute{text-align:center}.attribute-badge{white-space:nowrap;border-radius:2px;padding:2px 6px;font-size:.7rem;font-weight:600;display:inline-block}.cell-unit{color:#444;text-align:center;font-size:.78rem}.empty-state{text-align:center;color:#888;padding:40px 16px}.empty-state p:first-child{margin-bottom:6px;font-size:.95rem}.empty-hint{font-size:.8rem}.site-notice{color:#888;border-top:1px solid #d8d4cf;margin-top:20px;padding:12px;font-size:.7rem;line-height:1.6}.site-notice p+p{margin-top:4px}.sticky-footer{z-index:20;background:#faf9f7;border-top:1px solid #d8d4cf;justify-content:space-between;align-items:center;padding:8px 12px;display:flex;position:fixed;bottom:0;left:0;right:0}.result-count{color:#5a5550;font-size:.8rem;font-weight:600}.reset-button{color:#944;cursor:pointer;background:#faf9f7;border:1px solid #c8a0a0;border-radius:3px;min-height:36px;padding:6px 14px;font-size:.8rem;font-weight:600}.reset-button:active{background:#f0eeeb}@media (width>=600px){html{font-size:15px}.app-main{padding:16px}.filter-panel{flex-direction:row;align-items:flex-end}.filter-group{flex:1}.card-table{min-width:auto}.th-image,.cell-image{width:56px}.card-image{width:44px;height:55px}.sticky-footer{max-width:860px;left:50%;transform:translate(-50%)}}