/* Optimized Widget: rank_legend_zoom */
.rank-legend-zoom { position: fixed !important; inset: 0 !important; width: 100vw; height: 100vh; height: 100dvh; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 1.75rem 2.8rem; box-sizing: border-box; opacity: 1; visibility: hidden; pointer-events: none; isolation: isolate; overscroll-behavior: contain; transition: visibility 0s linear 0.22s; font-family: "Kanit", sans-serif; color: #fff; }
.rank-legend-zoom.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.rank-legend-zoom__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(108, 99, 255, 0.9), rgba(45, 49, 85, 0.91) 42%, rgba(3, 7, 42, 0.92)); opacity: 0; transition: opacity 0.2s ease-out; }
.rank-legend-zoom.is-open .rank-legend-zoom__backdrop { opacity: 1; }
.rank-legend-zoom__panel { position: relative; width: min(1210px, calc(100vw - 5.6rem)); max-height: min(88vh, 850px); display: flex; flex-direction: column; gap: 0.85rem; padding: 0; background: transparent; border: 0; box-shadow: none; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.22s ease-out, transform 0.24s ease-out; will-change: transform, opacity; backface-visibility: hidden; contain: layout paint; overflow: visible; }
.rank-legend-zoom.is-open .rank-legend-zoom__panel { opacity: 1; transform: translate3d(0, 0, 0); }
.rank-legend-zoom__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 0.1rem 0.1rem; cursor: default; }
.rank-legend-zoom__titleline { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; white-space: nowrap; text-shadow: 0 10px 28px rgba(0, 0, 0, 0.72); }
.rank-legend-zoom__eyebrow { display: inline-flex; align-items: baseline; font-family: "JetBrains Mono", "Consolas", monospace; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #a78bfa; opacity: 0.92; margin-bottom: 0; }
.rank-legend-zoom__slash { font-family: "JetBrains Mono", "Consolas", monospace; font-size: 0.82rem; font-weight: 900; color: rgba(216, 226, 255, 0.68); }
.rank-legend-zoom__header h2 { margin: 0; font-family: "Kanit", sans-serif; font-size: clamp(2.05rem, 3vw, 3.2rem); line-height: 0.9; font-weight: 950; text-transform: uppercase; letter-spacing: 0; color: #fff; min-width: 0; }
.rank-legend-zoom__header h2 span { color: #a78bfa; }
.rank-legend-zoom__close { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(167, 139, 250, 0.24); background: rgba(12, 14, 25, 0.78); color: #d8ccff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.32); transition: transform 0.16s ease-out, border-color 0.16s ease-out, background 0.16s ease-out, box-shadow 0.16s ease-out; }
.rank-legend-zoom__close:hover { transform: translate3d(0, -1px, 0); border-color: rgba(167, 139, 250, 0.72); background: rgba(108, 99, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 18px rgba(108, 99, 255, 0.28), 0 12px 28px rgba(0, 0, 0, 0.36); }
.rank-legend-zoom__body { position: relative; min-height: 0; padding: 0; overflow: visible; }
.rank-legend-zoom__scroll-wrap { position: relative; min-height: 0; }
.rank-legend-zoom__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; max-height: min(720px, calc(100dvh - 128px)); overflow-y: auto; overflow-x: hidden; padding: 0.08rem 0.08rem 0.95rem; scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.6) rgba(255, 255, 255, 0.04); }
.rank-legend-zoom__grid::-webkit-scrollbar { width: 8px; }
.rank-legend-zoom__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; }
.rank-legend-zoom__grid::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.58); border-radius: 999px; }
.rank-legend-zoom .jgtr-scroll-hint { bottom: 0; height: 42px; background: linear-gradient(to bottom, rgba(3, 4, 12, 0) 0%, rgba(3, 4, 12, 0.86) 100%); padding-bottom: 5px; }
.rank-legend-zoom .jgtr-scroll-hint i { color: #a78bfa; filter: drop-shadow(0 0 5px #a78bfa); }
.rank-legend-zoom__card { position: relative; height: 120px; display: block; border: 1px solid color-mix(in srgb, var(--rlz-rank-color) 32%, rgba(108, 99, 255, 0.2)); border-radius: 12px; background: rgba(26, 27, 46, 0.95); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055); opacity: 0; overflow: hidden; cursor: default; transform: translate3d(0, 10px, 0); transition: border-color 0.24s ease-out, box-shadow 0.24s ease-out, background 0.24s ease-out; animation: rank-legend-zoom-card-out 0.01s linear both; will-change: transform, opacity; backface-visibility: hidden; contain: layout paint; }
.rank-legend-zoom.is-open .rank-legend-zoom__card { animation: rank-legend-zoom-card-in 0.26s ease-out both; animation-delay: var(--rlz-delay); }
.rank-legend-zoom__card:hover { border-color: var(--rlz-rank-color); background: rgba(31, 32, 54, 0.98); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.44), 0 0 18px color-mix(in srgb, var(--rlz-rank-color) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.rank-legend-zoom__badge-wrap { position: absolute; top: 0; left: 50%; z-index: 1; width: 94%; height: 78%; display: flex; align-items: center; justify-content: center; transform: translate3d(-50%, 0, 0); transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rank-legend-zoom__card:hover .rank-legend-zoom__badge-wrap { transform: translate3d(-50%, -2px, 0) scale(1.045) rotate(1deg); }
.rank-legend-zoom__badge { width: 100%; height: 100%; object-fit: contain; filter: none; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.rank-legend-zoom__meta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.1rem; min-width: 0; padding: 0.45rem 0.42rem 0.42rem; text-align: center; background: linear-gradient(to top, rgba(13, 14, 23, 0.94) 0%, rgba(13, 14, 23, 0.62) 28%, transparent 64%); border-radius: inherit; }
.rank-legend-zoom__name { display: inline-flex; align-items: baseline; justify-content: center; gap: 0.18rem; font-size: 0.74rem; font-weight: 950; line-height: 1; text-transform: uppercase; color: var(--rlz-rank-color); max-width: 100%; }
.rank-legend-zoom__tier { font-family: "JetBrains Mono", "Consolas", monospace; font-size: 0.5rem; font-weight: 900; line-height: 1; color: #a78bfa; letter-spacing: 0.04em; opacity: 0.95; transform: translateY(-1px); }
.rank-legend-zoom__score { font-family: "JetBrains Mono", "Consolas", monospace; font-size: 0.5rem; font-weight: 700; line-height: 1.05; color: rgba(216, 226, 255, 0.72); white-space: nowrap; }
.rank-legend-zoom__card--oracle { grid-column: 3 / span 2; height: 126px; display: flex; align-items: center; justify-content: center; gap: 0.72rem; padding: 0.58rem 0.78rem; border-color: color-mix(in srgb, var(--rlz-rank-color) 52%, rgba(255, 255, 255, 0.12)); background: linear-gradient(135deg, rgba(26, 27, 46, 0.98), rgba(54, 38, 90, 0.74)); box-shadow: 0 15px 32px rgba(0, 0, 0, 0.42), 0 0 22px color-mix(in srgb, var(--rlz-rank-color) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.rank-legend-zoom__card--oracle .rank-legend-zoom__badge-wrap { position: relative; top: auto; left: auto; flex: 0 0 98px; width: 98px; height: 98px; transform: none; }
.rank-legend-zoom__card--oracle:hover .rank-legend-zoom__badge-wrap { transform: translate3d(0, -2px, 0) scale(1.035) rotate(1deg); }
.rank-legend-zoom__card--oracle .rank-legend-zoom__meta { position: relative; inset: auto; flex: 0 1 auto; align-items: center; justify-content: center; padding: 0; text-align: center; background: none; border-radius: 0; }
.rank-legend-zoom__card--oracle .rank-legend-zoom__name { justify-content: center; font-size: 1rem; }
.rank-legend-zoom__card--oracle .rank-legend-zoom__score { font-size: 0.62rem; color: rgba(251, 191, 36, 0.92); }
@keyframes rank-legend-zoom-card-in { 0% { opacity: 0; transform: translate3d(0, 10px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes rank-legend-zoom-card-out { 0%, 100% { opacity: 0; transform: translate3d(0, 10px, 0); } }
@media (max-width: 1279px) { .rank-legend-zoom { padding: 1rem; } .rank-legend-zoom__panel { width: min(780px, calc(100vw - 2rem)); max-height: 88vh; } .rank-legend-zoom__header h2 { font-size: clamp(1.55rem, 5vw, 2.35rem); } .rank-legend-zoom__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.44rem; max-height: calc(100dvh - 108px); } .rank-legend-zoom__card { height: 118px; } .rank-legend-zoom__card--oracle { grid-column: 2 / span 2; height: 126px; } .rank-legend-zoom__card--oracle .rank-legend-zoom__badge-wrap { flex-basis: 96px; width: 96px; height: 96px; } }
@media (max-width: 640px) { .rank-legend-zoom { padding: 0.72rem; align-items: center; justify-content: center; } .rank-legend-zoom__panel { width: calc(100vw - 1.44rem); max-height: 89vh; gap: 0.62rem; } .rank-legend-zoom__header { align-items: center; gap: 0.5rem; padding: 0; } .rank-legend-zoom__titleline { flex-wrap: wrap; gap: 0.24rem 0.32rem; white-space: normal; } .rank-legend-zoom__eyebrow { font-size: 0.56rem; letter-spacing: 0.12em; } .rank-legend-zoom__slash { font-size: 0.58rem; } .rank-legend-zoom__header h2 { flex-basis: 100%; font-size: 1.55rem; line-height: 0.92; } .rank-legend-zoom__close { width: 34px; height: 34px; flex-basis: 34px; } .rank-legend-zoom__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.36rem; max-height: calc(89vh - 96px); padding: 0.04rem 0.04rem 1rem; } .rank-legend-zoom__card { height: 106px; border-radius: 9px; } .rank-legend-zoom__badge-wrap { height: 72%; } .rank-legend-zoom__meta { padding: 0.34rem 0.22rem 0.32rem; } .rank-legend-zoom__name { font-size: 0.58rem; gap: 0.12rem; } .rank-legend-zoom__tier { font-size: 0.4rem; } .rank-legend-zoom__score { font-size: 0.4rem; white-space: normal; } .rank-legend-zoom__card--oracle { grid-column: 1 / -1; justify-self: center; width: min(240px, 82vw); height: 118px; gap: 0.58rem; padding: 0.54rem 0.64rem; } .rank-legend-zoom__card--oracle .rank-legend-zoom__badge-wrap { flex-basis: 82px; width: 82px; height: 82px; } .rank-legend-zoom__card--oracle .rank-legend-zoom__name { font-size: 0.7rem; } .rank-legend-zoom__card--oracle .rank-legend-zoom__score { font-size: 0.48rem; } }