#background,body,html{height:100%;display:flex}#back-btn,#filter-btn,#sort-btn{border:none;background:0 0;transition:transform .15s}#gallery-grid,#sort-btn,#wrapper{position:relative}#card-overlay,#filter-overlay{z-index:-1;background:rgba(0,0,0,0)}#filter-search-input,*,.filter-category-header span,.sort-opt-label span,body,html{font-family:'Noto Sans TC',sans-serif}@font-face{font-family:'Noto Sans TC';src:url('../fonts/Noto-Sans-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body,html{width:100%;background-color:#000!important;overflow:hidden!important;justify-content:center;align-items:flex-start;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}#wrapper{width:min(100vw,calc(100vh * 9 / 16));height:min(100vh,calc(100vw * 16 / 9));background-color:#111;overflow:hidden;box-shadow:0 0 20px rgba(0,0,0,.8);container-type:size;isolation:isolate;view-transition-name:main-wrapper}#background,#background div,#top-bar{position:absolute}#wrapper img{display:block}#background{width:100%;transform-origin:top left;transform:scale(1);overflow:hidden;justify-content:center;align-items:center}#background img{max-width:100%;height:auto;object-fit:contain;pointer-events:none}#top-bar{top:0;left:0;width:100%;height:10cqh;z-index:100;display:flex;align-items:center;padding-left:3cqw;background:#111;box-shadow:0 2px 8px rgba(0,0,0,.699)}#back-btn,#filter-btn,#sort-btn,.sort-option{padding:0;cursor:pointer}#back-btn{width:12cqw;height:12cqw}#back-btn:active{transform:scale(.85)}#back-btn img,#filter-btn img,.category-reset-btn img,.filter-action-btn img,.filter-item img,.filter-slot img,.search-clear-btn img{width:100%;height:100%;object-fit:contain}#topbar-filters{display:flex;align-items:center;gap:1cqw;margin-left:auto;overflow:hidden}#topbar-filters img{width:5cqw;height:5cqw;object-fit:contain;flex-shrink:0}#sort-btn{margin-left:2cqw;height:10cqw}#sort-btn .sort-bg,.filter-logic-bg,.filter-skill-bg,.sort-opt-bg{display:block;height:100%;width:auto}#sort-btn .sort-order,#sort-btn .sort-text{position:absolute;top:50%;transform:translateY(-50%)}#sort-btn .sort-order{left:10%;width:auto;height:55%;object-fit:contain}#sort-btn .sort-text{left:57%;transform:translate(-50%,-45%);color:rgba(255,255,255,.85);font-size:4cqw;line-height:1;white-space:nowrap}#filter-btn:active,#sort-btn:active{transform:scale(.95)}#filter-btn{margin-left:4cqw;margin-right:5cqw;width:10cqw;height:10cqw}#scrollbar-thumb,#scrollbar-track{border-radius:1cqw;position:absolute}.card-icon,.card-inner{border-radius:8%;overflow:hidden;width:100%;height:100%}#gallery-container{position:absolute;top:10cqh;left:0;width:100%;height:90cqh;overflow-y:auto;overflow-x:hidden;padding:2cqw;scrollbar-width:none}#gallery-container::-webkit-scrollbar{display:none}#scrollbar-track{top:11cqh;right:0cqw;width:2.2cqw;height:88cqh;z-index:50;background:rgba(255,255,255,.08);opacity:0;transition:opacity .3s}#scrollbar-track::before{content:'';position:absolute;inset:0 -4cqw 0 -4cqw;pointer-events:none}#scrollbar-track.visible{opacity:1;pointer-events:auto}#scrollbar-thumb{width:100%;background-color:rgba(75,75,75,.5);top:0;min-height:8cqh;cursor:grab}#scrollbar-thumb::before{content:'';position:absolute;inset:-1.5cqh -3cqw -1.5cqh -3cqw}#scrollbar-thumb:active{cursor:grabbing;background-color:rgba(100,100,100,.7)}.card-row{position:absolute;left:0;width:100%;display:flex;gap:2.5cqw}.card-cell{flex:0 0 calc((100% - 2.5cqw * 4)/ 5);aspect-ratio:1;position:relative;cursor:pointer;transition:transform .15s,filter .15s}.card-inner{position:relative;background:#2a2a2a}#border-canvas,#card-overlay,#sort-overlay,#sort-panel,.card-id-label,.card-label,.refine-icon{position:absolute;pointer-events:none}@keyframes card-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.card-inner.loading{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite card-shimmer}.card-cell:active .card-inner{transform:scale(.98);filter:brightness(.9)}#border-canvas{z-index:2}@media (max-width:768px){#border-canvas{display:none}}.card-icon{display:block;object-fit:cover;opacity:0;transition:opacity .2s}.card-icon.loaded,.filter-cards-row.has-cards .filter-cards-fade-l,.filter-cards-row.has-cards .filter-cards-fade-r{opacity:1}.card-label{left:0;right:0;bottom:0;transform:translateY(41%);height:24%;z-index:3;background:linear-gradient(90deg,#00000000 0,#000000b3 13%,#000 34%,#000 66%,#000 87%,#00000000 100%);display:flex;align-items:center;justify-content:center;color:#c8a832;font-style:italic;font-size:2.8cqw;white-space:nowrap;overflow:visible}.card-label>span{display:inline-block}@media (hover:hover) and (pointer:fine){.card-label{font-size:10cqw}.card-label>span{transform:scale(.28);transform-origin:center}}.card-label.dual-max{font-weight:400}.card-label.all-max{font-weight:700}.card-id-label{left:50%;bottom:-1px;transform:translate(-50%,75%) scale(.25);color:rgba(255,255,255,.5);font-size:10cqw;white-space:nowrap}.refine-icon{left:-2%;height:90%;top:50%;transform:translateY(-50%)}.card-label::after,.card-label::before{content:'';position:absolute;left:0;right:0;height:.2cqw;pointer-events:none}.card-label::before{top:0;background:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(90deg,transparent 0,#c8a832 15%,#c8a832 85%,transparent 100%),linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);background-size:100% .13cqw,100% .13cqw,100% .13cqw;background-position:0 0,0 50%,0 100%;background-repeat:no-repeat;height:.4cqw;top:-.13cqw}.card-label::after{bottom:0;background:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(90deg,transparent 0,#c8a832 15%,#c8a832 85%,transparent 100%),linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);background-size:100% .13cqw,100% .13cqw,100% .13cqw;background-position:0 0,0 50%,0 100%;background-repeat:no-repeat;height:.4cqw;bottom:-.13cqw}#card-overlay{top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:background .3s}#card-overlay.active,#card-overlay.closing,#card-overlay.loading{z-index:200}#card-overlay.loading{pointer-events:auto;background:rgba(0,0,0,.5)}#card-overlay.active{pointer-events:auto;background:rgba(0,0,0,.7)}#card-frame{width:100%;height:100%;border:none;transform:scale(0);opacity:0;transition:transform .3s,opacity .3s}#card-overlay.active #card-frame{transform:scale(1);opacity:1}#card-overlay.closing #card-frame{transform:scale(0);opacity:0}#sort-overlay{inset:0;z-index:-1}#sort-overlay.active{z-index:140;background:linear-gradient(90deg,transparent 75%,rgba(0,0,0,.6) 100%);pointer-events:auto}#sort-panel{top:12cqh;right:0;transform:translateX(100%);z-index:145;display:flex;flex-direction:column;gap:.2cqw;transition:transform .25s cubic-bezier(.4, 0, .2, 1);align-items:flex-end}#sort-panel.active{transform:translateX(0);pointer-events:auto}.sort-option{position:relative;border:none;background:0 0;height:10cqw}.sort-opt-label{position:absolute;inset:0;display:flex;align-items:center;padding:0 2cqw}.sort-opt-dir{width:5cqw;height:5cqw;object-fit:contain}.sort-opt-label span{position:absolute;left:20%;right:0;text-align:center;color:#fff;font-size:4cqw;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.8)}#filter-overlay{position:absolute;inset:0;pointer-events:none;will-change:background}#filter-overlay.active{z-index:150;background:rgba(0,0,0,.5);pointer-events:auto}#filter-panel{position:absolute;bottom:-11%;left:0;right:0;margin:0 auto;transform:translateY(100%);width:95%;z-index:160;opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.4, 0, .2, 1),opacity .25s}.filter-bg{border-radius:1%;border:3px solid #000}#filter-panel.active{transform:translateY(0);opacity:1;pointer-events:auto}#filter-panel .filter-bg,.filter-series-btn img,.filter-tab-bg,.skill-tag-btn .stb-bg{display:block;width:100%;height:auto}.filter-content{position:absolute;inset:0;display:flex;flex-direction:column;padding:3cqw 3cqw 0}.filter-row,.filter-slot{flex-shrink:0}.filter-top-row{display:flex;align-items:center;gap:1.5cqw}.filter-slots{display:flex;gap:2cqw;flex:1;min-width:0}.filter-slot-group{display:flex;gap:1cqw}.filter-slot{width:5.5cqw;height:5.5cqw;position:relative}.filter-item .item-icon,.filter-slot .slot-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78%;height:78%;object-fit:contain}.filter-actions{display:flex;gap:3cqw;flex-shrink:0}.filter-action-btn{width:5.5cqw;height:5.5cqw;border:none;background:0 0;padding:0;cursor:pointer}.filter-cards-row,.filter-tabs-row{border-radius:1.5cqw;margin-top:2cqw}.filter-cards-row{position:relative;background:rgba(0,0,0,.4);height:15cqw;overflow:hidden}.filter-cards-scroll{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;display:flex;align-items:center;padding:0 3cqw}.filter-cards-scroll::-webkit-scrollbar{display:none}.filter-cards-track{display:flex;gap:1.5cqw;flex-shrink:0}.filter-cards-track .filter-card-icon{width:12cqw;height:12cqw;border-radius:12%;object-fit:cover;flex-shrink:0;pointer-events:none}.filter-cards-fade-l,.filter-cards-fade-r{position:absolute;top:0;bottom:0;width:4cqw;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s}.filter-cards-fade-l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0,transparent 100%)}.filter-cards-fade-r{right:0;background:linear-gradient(-90deg,rgba(0,0,0,.6) 0,transparent 100%)}.filter-tabs-row{display:flex;gap:1cqw;padding:.7cqw;background:rgba(0,0,0,.6)}.filter-tab{flex:1;position:relative;border:none;background:0 0;padding:0;cursor:pointer}.filter-tab-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1cqw}.filter-tab-label img{height:65%;width:auto;object-fit:contain}.filter-tab-label span{color:#fff;font-size:2.8cqw;white-space:nowrap}.filter-category.has-selection .filter-item:not(.selected),.filter-category.has-selection .filter-series-btn:not(.selected),.filter-skill-btn:not(.active) span,.filter-tab:not(.active) .filter-tab-label{filter:brightness(.5)}.filter-category.has-selection .skill-tag-btn:not(.selected),.filter-item.dimmed{filter:brightness(.4)}.filter-search-row{margin-top:2cqw}.filter-search-box{display:flex;align-items:center;background:rgba(0,0,0,.4);border-radius:.7cqw;padding:.7cqw 1cqw;gap:1.5cqw}.search-icon{width:3.5cqw;height:3.5cqw;color:rgba(255,255,255,.4);flex-shrink:0}#filter-search-input{flex:1;background:0 0;border:none;outline:0;color:#fff;font-size:3cqw;caret-color:#c8a832}#filter-search-input::placeholder{color:rgba(255,255,255,.35)}.search-clear-btn{border:none;background:0 0;padding:0;cursor:pointer;flex-shrink:0;width:3cqw;height:3cqw}.filter-skill-row{display:none;margin-top:2cqw;gap:2cqw;align-items:center}.filter-skill-row.visible{display:flex}.filter-logic-group,.filter-skill-group{height:6.4cqw}.filter-skill-group{display:flex;gap:1cqw;background:rgba(0,0,0,.5);border-radius:1cqw;padding:.5cqw}.filter-skill-btn{position:relative;border:none;background:0 0;padding:0;cursor:pointer;height:100%;flex-shrink:0}.filter-logic-btn span,.filter-skill-btn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Noto Sans TC',sans-serif;font-size:3cqw;white-space:nowrap}.filter-logic-group{margin-left:auto;background:rgba(0,0,0,.5);border-radius:1.5cqw;padding:.5cqw;display:flex}.filter-logic-btn{position:relative;border:none;background:0 0;padding:0;cursor:pointer;height:100%}.filter-logic-btn span,.filter-skill-btn span,.filter-tab-label span{text-shadow:0 2px 2px #000}.filter-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:1.5cqw;padding-bottom:25cqw;scrollbar-width:none}.filter-body::-webkit-scrollbar{display:none}.filter-category{margin-bottom:1.5cqw}.filter-category-header{display:flex;align-items:center;background:rgba(0,0,0,.4);border-radius:.7cqw;padding:.7cqw 1cqw;margin-bottom:1.5cqw;gap:1.5cqw}.filter-category-header span{color:rgba(255,255,255,.85);font-size:2.5cqw;flex:1}.filter-series-btn span,.skill-tag-btn .stb-label span{font-family:'Noto Sans TC',sans-serif;font-size:3cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute}.category-reset-btn{border:none;background:0 0;padding:0;cursor:pointer;width:3cqw;height:3cqw;flex-shrink:0}.filter-category-items{display:flex;flex-wrap:wrap;gap:1.5cqw;padding:1.5cqw;border-radius:.7cqw}.filter-item{width:8cqw;height:8cqw;flex-shrink:0;position:relative;cursor:pointer}.filter-item.dimmed{pointer-events:none}.filter-chars-items,.filter-series-items{background:rgba(0,0,0,.4);display:flex;flex-wrap:wrap;gap:1.5cqw;padding:1.5cqw}.filter-expand-btn,.filter-series-btn{background:0 0;border:none;cursor:pointer}.filter-chars-items.collapsed,.filter-series-items.collapsed{max-height:17cqw;overflow:hidden}.filter-series-btn{position:relative;padding:0;width:calc((100% - 3cqw)/ 3)}.filter-series-btn span{inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);text-shadow:0 1px 0 rgba(0,0,0,.8)}.filter-expand-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:.5cqw 0;transition:transform .2s}.filter-expand-btn svg{width:4cqw;height:4cqw;color:rgba(255,255,255,.5);transition:transform .2s}.filter-expand-btn.expanded svg{transform:rotate(180deg)}.filter-body.hidden{display:none}.filter-skill-tags-items{background:0 0!important;padding:0!important;gap:2.5cqw}.skill-tag-btn{position:relative;border:none;background:0 0;padding:0;cursor:pointer;width:calc((100% - 3cqw)/ 3.1);overflow:hidden;border-radius:1cqw}.skill-tag-btn .stb-border{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.skill-tag-btn .stb-color{position:absolute;bottom:0;left:0;right:0;height:60%;pointer-events:none}.skill-tag-btn .stb-label{position:absolute;inset:0;display:flex;align-items:center;padding:0 1cqw}.skill-tag-btn .stb-label img{height:55%;width:auto;object-fit:contain;flex-shrink:0}.skill-tag-btn .stb-label span{left:20%;right:0;text-align:center;color:#fff;text-shadow:0 2px 2px #000}#loading-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.5);font-size:4cqw}::view-transition-new(root),::view-transition-old(root){animation-duration:.3s;animation-timing-function:ease-in-out}