.wcf{display:grid;grid-gap:.6rem;gap:.6rem}.wcf-card,.wcf-sep,.wcf-thumb{--grade:var(--lu4-grade-ng)}:is(.wcf-card,.wcf-thumb,.wcf-sep)[data-grade=D]{--grade:var(--lu4-grade-d)}:is(.wcf-card,.wcf-thumb,.wcf-sep)[data-grade=C]{--grade:var(--lu4-grade-c)}:is(.wcf-card,.wcf-thumb,.wcf-sep)[data-grade=B]{--grade:var(--lu4-grade-b)}:is(.wcf-card,.wcf-thumb,.wcf-sep)[data-grade=A]{--grade:var(--lu4-grade-a)}.wcf-stage{--card-w:min(22rem,78vw);--card-h:37.5rem;position:relative;height:calc(var(--card-h) + 1.5rem);overflow:hidden;perspective:1400px;touch-action:pan-y;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--lu4-radius-lg);outline:none}.wcf-stage.is-dragging{cursor:-webkit-grabbing;cursor:grabbing}.wcf-stage:focus-visible{box-shadow:0 0 0 3px var(--lu4-focus-ring)}.wcf-slot{position:absolute;top:.75rem;left:50%;width:var(--card-w);height:var(--card-h);transform:translateX(calc(-50% + var(--x) * var(--card-w) * .74)) translateZ(calc(var(--d) * -120px)) rotateY(calc(var(--x) * -16deg)) scale(calc(1 - var(--d) * .08));opacity:calc(1 - var(--d) * .38);transition:transform .46s cubic-bezier(.22,.8,.26,1),opacity .46s ease;will-change:transform}.wcf-stage.is-dragging .wcf-slot{transition:none}.wcf-slot:not(:has(.wcf-card[aria-hidden=false])){cursor:pointer}.wcf-slot:not(:has(.wcf-card[aria-hidden=false])) .wcf-card{filter:saturate(.7)}.wcf-card{display:grid;grid-template-rows:auto auto auto 1fr auto;grid-gap:.75rem;gap:.75rem;height:100%;padding:1rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--grade) 40%,var(--lu4-border));border-radius:var(--lu4-radius-lg);color:var(--lu4-text);background:radial-gradient(110% 45% at 0 0,color-mix(in srgb,var(--grade) 20%,transparent),transparent 70%),var(--lu4-surface);box-shadow:0 22px 50px -24px color-mix(in srgb,var(--grade) 60%,rgb(0 0 0/.6))}.wcf-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:.85rem;gap:.85rem;align-items:center}.wcf-art{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:var(--lu4-radius-md);background:var(--lu4-surface-raised);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--grade) 70%,transparent),0 8px 24px -10px var(--grade)}.wcf-art:before{content:"";position:absolute;inset:24%;background:var(--lu4-text-subtle);opacity:.25;-webkit-mask:var(--ico) center /contain no-repeat;mask:var(--ico) center /contain no-repeat}.wcf-art img{position:relative;width:64px;height:64px;border-radius:6px;pointer-events:none}.wcf-id{display:grid;grid-gap:.2rem;gap:.2rem;min-width:0}.wcf-id h3{display:-webkit-box;margin:0;overflow:hidden;font-size:1.1rem;line-height:1.2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.wcf-id p{margin:0;color:var(--lu4-text-muted);font-size:var(--lu4-text-sm)}.wcf-marks{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.wcf-grade,.wcf-rank,.wcf-tier{padding:.05rem .45rem;border-radius:var(--lu4-radius-xs);font-size:var(--lu4-text-xs);font-weight:800}.wcf-grade{color:#10161d;background:var(--grade)}.wcf-tier{color:var(--lu4-text-muted);background:var(--lu4-surface-raised)}.wcf-rank{color:var(--grade);background:color-mix(in srgb,var(--grade) 14%,transparent)}.wcf-bars{display:grid;grid-gap:.55rem;gap:.55rem}.wcf-bar{display:grid;grid-template-columns:3rem minmax(0,1fr);grid-gap:.1rem .6rem;gap:.1rem .6rem;align-items:baseline}.wcf-bar>span{color:var(--lu4-text-muted);font-size:var(--lu4-text-xs);font-weight:700}.wcf-bar strong{font-size:1.45rem;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.wcf-bar .wcf-track,.wcf-bar small{grid-column:1/-1}.wcf-bar small{overflow:hidden;color:var(--lu4-text-subtle);font-size:.6875rem;text-overflow:ellipsis;white-space:nowrap}.wcf-track{display:block;height:6px;overflow:hidden;border-radius:999px;background:var(--lu4-surface-raised)}.wcf-track>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--grade) 50%,transparent),var(--grade))}.wcf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:.3rem;gap:.3rem;margin:0}.wcf-stats div{min-width:0;padding:.3rem .45rem;border-radius:var(--lu4-radius-sm);background:var(--lu4-surface-raised)}.wcf-stats dt{color:var(--lu4-text-subtle);font-size:.6875rem}.wcf-stats dd{margin:0;overflow:hidden;font-size:var(--lu4-text-sm);font-weight:750;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.wcf-traits{display:grid;align-content:start;grid-gap:.2rem;gap:.2rem;margin:0;padding:0;list-style:none}.wcf-traits li{display:grid;grid-template-columns:6.2rem minmax(0,1fr);grid-gap:.5rem;gap:.5rem;align-items:baseline;padding:.15rem .5rem;border-left:2px solid var(--lu4-border);font-size:var(--lu4-text-xs);line-height:1.35}.wcf-traits b{overflow:hidden;color:var(--lu4-text-muted);text-overflow:ellipsis;white-space:nowrap}.wcf-traits li[data-tone=sa]{border-left-color:var(--lu4-accent)}.wcf-traits li[data-tone=sa] b{color:var(--lu4-accent-strong)}.wcf-traits li[data-tone=enchant]{border-left-color:var(--grade)}.wcf-traits li[data-tone=enchant] b{color:var(--grade)}.wcf-traits li[data-tone=rare]{border-left-color:var(--lu4-gold)}.wcf-traits li[data-tone=rare] b{color:var(--lu4-gold)}.wcf-empty{margin:0;color:var(--lu4-text-subtle);font-size:var(--lu4-text-xs)}.wcf-actions{align-self:end}.wcf-nav{position:absolute;top:50%;z-index:20;width:2.75rem;height:2.75rem;transform:translateY(-50%);border:1px solid var(--lu4-border);border-radius:999px;color:var(--lu4-text);background:color-mix(in srgb,var(--lu4-surface) 88%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:1.5rem;line-height:1;cursor:pointer}.wcf-nav.is-prev{left:.5rem}.wcf-nav.is-next{right:.5rem}.wcf-nav:disabled{opacity:.35;cursor:default}.wcf-nav:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lu4-focus-ring)}.wcf-pos{margin:0;color:var(--lu4-text-subtle);font-size:var(--lu4-text-xs);text-align:center}.wcf-pos b{color:var(--lu4-text)}.wcf-beacons{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}.wcf-beacons button{--grade:var(--lu4-grade-ng);display:inline-flex;gap:.45rem;align-items:center;min-height:2.5rem;padding:0 .9rem 0 .35rem;border:1px solid var(--lu4-border);border-radius:999px;color:var(--lu4-text-muted);background:var(--lu4-surface);font:inherit;font-size:var(--lu4-text-sm);cursor:pointer;transition:border-color .14s ease,background .14s ease}.wcf-beacons button[data-grade=D]{--grade:var(--lu4-grade-d)}.wcf-beacons button[data-grade=C]{--grade:var(--lu4-grade-c)}.wcf-beacons button[data-grade=B]{--grade:var(--lu4-grade-b)}.wcf-beacons button[data-grade=A]{--grade:var(--lu4-grade-a)}.wcf-beacons b{display:grid;place-items:center;min-width:1.9rem;height:1.8rem;padding:0 .3rem;border-radius:999px;color:#10161d;background:var(--grade);font-size:var(--lu4-text-xs);font-weight:800}.wcf-beacons span{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.wcf-beacons button:hover,.wcf-beacons button[aria-pressed=true]{border-color:var(--grade);color:var(--lu4-text)}.wcf-beacons button[aria-pressed=true]{background:color-mix(in srgb,var(--grade) 16%,var(--lu4-surface))}.wcf-beacons button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lu4-focus-ring)}.wcf-strip{padding:.45rem;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;border:1px solid var(--lu4-border);border-radius:var(--lu4-radius-md);background:var(--lu4-surface);scrollbar-width:thin}.wcf-cell,.wcf-strip{display:flex;gap:.3rem;align-items:center}.wcf-cell{flex:none}.wcf-sep{display:grid;place-items:center;min-width:1.9rem;height:3.5rem;margin:0 .15rem;border-radius:var(--lu4-radius-sm);color:#10161d;background:var(--grade);font-size:var(--lu4-text-xs);font-weight:800}.wcf-thumb{display:grid;place-items:center;width:3.5rem;height:3.5rem;padding:0;overflow:hidden;scroll-snap-align:center;border:0;border-radius:var(--lu4-radius-sm);background:var(--lu4-surface-raised);box-shadow:0 0 0 1px color-mix(in srgb,var(--grade) 45%,transparent);opacity:.6;cursor:pointer;transition:opacity .14s ease,transform .14s ease,box-shadow .14s ease}.wcf-thumb:hover{opacity:1}.wcf-thumb[aria-selected=true]{opacity:1;transform:translateY(-2px);box-shadow:0 0 0 2px var(--grade),0 6px 16px -8px var(--grade)}.wcf-thumb img{width:100%;height:100%;object-fit:cover}.wcf-thumb span{color:var(--lu4-text-muted);font-size:var(--lu4-text-xs);font-weight:700}.wcf-thumb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lu4-focus-ring)}@media (max-width:600px){.wcf-stage{--card-h:40rem}.wcf-nav{display:none}}@media (prefers-reduced-motion:reduce){.wcf-beacons button,.wcf-slot,.wcf-thumb{transition:none}}