.character-picker-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:18px;background:#000000ad}.character-picker-modal[hidden]{display:none}.character-picker-panel{display:flex;flex-direction:column;width:min(940px,100%);height:min(720px,calc(100vh - 36px));max-height:calc(100vh - 36px);overflow:hidden;border:1px solid #d8dde3;border-radius:8px;background:#fff;box-shadow:0 18px 44px #00000047}.character-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e4e7eb}.character-picker-heading h2{margin:0;font-size:1.2rem;line-height:1.35}.character-picker-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border:1px solid #d8dde3;border-radius:50%;background:#fff;color:#222;font-size:28px;line-height:1;cursor:pointer}.character-picker-close:hover,.character-picker-close:focus-visible{background:#f4f6f8}.character-picker-filter{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px 14px;border-bottom:1px solid #e4e7eb;background:#fff}.character-picker-filter-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:none;border-radius:50%;background-color:var(--attr-btn-bg-color, #999);color:var(--attr-btn-text-color, #fff);font-weight:700;font-size:.9rem;line-height:1;opacity:.6;cursor:pointer;box-shadow:none;transition:background-color .3s,color .3s,opacity .3s,box-shadow .3s}.character-picker-filter-button:hover,.character-picker-filter-button:focus-visible,.character-picker-filter-button.is-active,.character-picker-filter-button.active{background-color:var(--attr-btn-hover-color, var(--attr-btn-bg-color, #999));color:var(--attr-btn-hover-text-color, var(--attr-btn-text-color, #fff))}.character-picker-filter-button:hover{opacity:.85}.character-picker-filter-button.is-active,.character-picker-filter-button.active{opacity:1;box-shadow:0 0 0 2px #fff inset,0 0 4px #0000004d}.character-picker-filter-button.all{--attr-btn-bg-color: var(--attribute-all-color);--attr-btn-hover-color: var(--attribute-all-hover-color);--attr-btn-text-color: var(--attribute-all-text-color);--attr-btn-hover-text-color: var(--attribute-all-hover-text-color)}.character-picker-filter-button.blue{--attr-btn-bg-color: var(--attribute-blue-color);--attr-btn-hover-color: var(--attribute-blue-hover-color);--attr-btn-text-color: var(--attribute-blue-text-color);--attr-btn-hover-text-color: var(--attribute-blue-hover-text-color)}.character-picker-filter-button.red{--attr-btn-bg-color: var(--attribute-red-color);--attr-btn-hover-color: var(--attribute-red-hover-color);--attr-btn-text-color: var(--attribute-red-text-color);--attr-btn-hover-text-color: var(--attribute-red-hover-text-color)}.character-picker-filter-button.green{--attr-btn-bg-color: var(--attribute-green-color);--attr-btn-hover-color: var(--attribute-green-hover-color);--attr-btn-text-color: var(--attribute-green-text-color);--attr-btn-hover-text-color: var(--attribute-green-hover-text-color)}.character-picker-filter-button.yellow{--attr-btn-bg-color: var(--attribute-yellow-color);--attr-btn-hover-color: var(--attribute-yellow-hover-color);--attr-btn-text-color: var(--attribute-yellow-text-color);--attr-btn-hover-text-color: var(--attribute-yellow-hover-text-color)}.character-picker-filter-button.heaven{--attr-btn-bg-color: var(--attribute-heaven-color);--attr-btn-hover-color: var(--attribute-heaven-hover-color);--attr-btn-text-color: var(--attribute-heaven-text-color);--attr-btn-hover-text-color: var(--attribute-heaven-hover-text-color)}.character-picker-filter-button.dark{--attr-btn-bg-color: var(--attribute-dark-color);--attr-btn-hover-color: var(--attribute-dark-hover-color);--attr-btn-text-color: var(--attribute-dark-text-color);--attr-btn-hover-text-color: var(--attribute-dark-hover-text-color)}.character-picker-sections{flex:1 1 auto;min-height:0;padding:14px 16px 16px;overflow-y:auto}.character-picker-section{margin-bottom:18px}.character-picker-section:last-child{margin-bottom:0}.character-picker-section.is-filtered-out,.character-picker-item.is-filtered-out{display:none!important}.character-picker-rarity-heading{position:sticky;top:-14px;z-index:1;margin:0 0 10px;padding:8px 10px;border-left:5px solid var(--primary-color);background:#f1f5f9;color:#222;font-size:1rem;line-height:1.3}.character-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}.character-picker-item{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px;box-sizing:border-box;min-height:102px;padding:8px 6px;border:1px solid #d8dde3;border-radius:8px;background:#fff;color:#222;font:inherit;text-align:center;text-decoration:none;cursor:pointer}.character-picker-item:hover,.character-picker-item:focus-visible{border-color:var(--primary-dark-color);background:#f7fbff}.character-picker-item.is-current{border-color:var(--pickupnow-color);box-shadow:inset 0 0 0 2px var(--pickupnow-color)}.character-picker-image{width:56px;height:56px;flex:0 0 auto;border-radius:10%;object-fit:cover}.character-picker-name{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;color:#222;font-size:.72rem;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.character-picker-empty{margin:16px;color:#667085;font-weight:700}@media screen and (max-width:768px){.character-picker-modal{--character-picker-top-space: max(48px, env(safe-area-inset-top));--character-picker-bottom-space: max(10px, env(safe-area-inset-bottom));align-items:flex-start;height:100vh;min-height:100vh;padding:var(--character-picker-top-space) 10px var(--character-picker-bottom-space);overflow:hidden}.character-picker-panel{height:calc(100vh - var(--character-picker-top-space) - var(--character-picker-bottom-space));max-height:calc(100vh - var(--character-picker-top-space) - var(--character-picker-bottom-space))}@supports (height: 100dvh){.character-picker-modal{height:100dvh;min-height:100dvh}.character-picker-panel{height:calc(100dvh - var(--character-picker-top-space) - var(--character-picker-bottom-space));max-height:calc(100dvh - var(--character-picker-top-space) - var(--character-picker-bottom-space))}}.character-picker-heading{padding:12px}.character-picker-filter{flex-wrap:nowrap;gap:5px;padding:8px}.character-picker-filter-button{width:clamp(32px,calc((100vw - 90px) / 7),42px);height:clamp(32px,calc((100vw - 90px) / 7),42px);min-width:clamp(32px,calc((100vw - 90px) / 7),42px);min-height:clamp(32px,calc((100vw - 90px) / 7),42px);font-size:clamp(.62rem,2.6vw,.82rem);line-height:1}.character-picker-sections{padding:12px}.character-picker-rarity-heading{top:-12px;margin-bottom:8px;padding:7px 9px}.character-picker-section{margin-bottom:14px}.character-picker-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:4px}.character-picker-item{min-height:94px;padding:7px 5px}.character-picker-image{width:50px;height:50px}}