.library-scene{--card-h:clamp(320px,72cqh,590px);position:relative;isolation:isolate;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#071126;color:#f2f5ff}
.library-background,.library-veil{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.library-background{overflow:hidden;background:radial-gradient(ellipse at 0% 42%,#07526355,transparent 48%),radial-gradient(ellipse at 95% 8%,#47277d66,transparent 48%),radial-gradient(ellipse at 86% 100%,#60205438,transparent 44%),#060b18}
.library-lightfield{position:absolute;inset:-8%;background:radial-gradient(ellipse at 8% 62%,#16b4d413,transparent 40%),radial-gradient(ellipse at 83% 28%,#7d55fb24,transparent 40%);animation:library-atmosphere 24s ease-in-out infinite alternate}
.library-lightfield::before,.library-lightfield::after{content:"";position:absolute;width:80%;height:140%;border:1px solid #92baff12;border-radius:50%;transform:rotate(-32deg);box-shadow:0 0 90px #49bfff05,inset 0 0 70px #69bfff04}
.library-lightfield::before{left:-48%;top:-34%;border-color:#78eaff1c}.library-lightfield::after{right:-42%;bottom:-57%;border-color:#c5a3ff1c}
.library-particles{position:absolute;inset:-20px;background-image:radial-gradient(circle at 7% 24%,#9deaff80 0 1px,transparent 2px),radial-gradient(circle at 18% 72%,#9deaff50 0 1px,transparent 2px),radial-gradient(circle at 32% 13%,#c2b3ff40 0 1px,transparent 2px),radial-gradient(circle at 88% 38%,#c2b3ff75 0 1px,transparent 2px),radial-gradient(circle at 95% 81%,#9deaff65 0 1px,transparent 2px),radial-gradient(circle at 65% 92%,#c2b3ff50 0 1px,transparent 2px),radial-gradient(circle at 46% 58%,#c2b3ff25 0 1px,transparent 2px);animation:library-drift 18s ease-in-out infinite alternate}
.library-veil{z-index:-1;background:linear-gradient(180deg,#05091440,transparent 24%,transparent 75%,#05091450)}
@keyframes library-atmosphere{to{transform:translate3d(2%,-2%,0) scale(1.04);opacity:.65}}
@keyframes library-drift{to{transform:translate3d(0,-16px,0);opacity:.45}}
@media(prefers-reduced-motion:reduce){.library-lightfield,.library-particles{animation:none}}
.library-bar{height:80px;padding:0 clamp(20px,4vw,76px);flex:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bed5ff0e;gap:20px;background:#09112445}
.library-brand{width:143px;display:block}.library-brand img{display:block;width:100%}.library-bar-actions{display:flex;align-items:center;gap:12px}.library-icon-button,.library-view,.library-nav{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;color:#dce6fa;border:1px solid #aac6ff26;border-radius:13px;background:linear-gradient(140deg,#a0c7ff12,#4b70b405);box-shadow:inset 0 1px #fff08;transition:background .2s,border-color .2s,transform .2s;backdrop-filter:blur(16px)}
.library-scene svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.library-view{width:44px;min-width:44px;padding:0;border-color:#99c9fa5c;background:linear-gradient(120deg,#7fdcfa1b,#bf8bed13)}.library-view[aria-pressed=true]{border-color:#bce8ff;background:#7fbbff25}.library-icon-button:hover,.library-view:hover,.library-nav:hover:not(:disabled){border-color:#bcddff9e;background:#a0c7ff25;transform:translateY(-1px)}
.library-heading{padding:24px clamp(20px,4vw,76px) 12px;display:flex;align-items:end;justify-content:space-between;flex:none;gap:20px}.library-kicker{font-size:9px;color:#91b4d2;letter-spacing:2.8px}.library-heading h1{margin:7px 0 0;font-size:clamp(22px,2.3vw,33px);letter-spacing:-1px;font-weight:600}.library-search{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #adc8fb29;border-radius:12px;background:#08162b9e;width:265px}.library-search svg{width:17px;color:#9bb9d5}.library-search input{min-width:0;width:100%;color:#e3edff;background:transparent;border:0;outline:none;font-size:12px}.library-search:focus-within{border-color:#a6e1ff}
.library-stage{position:relative;flex:1;min-height:0;container-type:size}.library-track{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;gap:34px;padding:calc((100cqh - var(--card-h))/2) 90px;scroll-behavior:auto;mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent);outline-offset:-4px}.library-track::-webkit-scrollbar{display:none}
.showcase-item{position:relative;flex:none;scroll-snap-align:center;scroll-snap-stop:always;width:min(500px,100%);height:var(--card-h);opacity:.35;transform:scale(.91);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .4s;filter:saturate(.65)}.showcase-item.is-selected{opacity:1;transform:scale(1);filter:none}.showcase-card{height:100%;overflow:hidden;display:flex;flex-direction:column;position:relative;border:1px solid color-mix(in srgb,var(--card-accent) 45%,#344362);border-radius:28px;background:linear-gradient(145deg,#1e2c46e8,#101a32f7);box-shadow:0 25px 60px #0007,inset 0 1px #fff1}.showcase-item.is-selected .showcase-card{box-shadow:0 25px 60px #0007,0 0 34px color-mix(in srgb,var(--card-accent) 10%,transparent),inset 0 1px #fff2}
.showcase-visual{display:block;position:relative;flex:1;min-height:0;width:100%;padding:0;border:0;background:#121c31;overflow:hidden;text-align:left;color:inherit}.showcase-visual canvas{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.showcase-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#17223b 0%,transparent 36%,#07101f26 100%);pointer-events:none}.showcase-number,.showcase-badge{position:absolute;z-index:1;top:20px;font-size:10px;letter-spacing:1px;backdrop-filter:blur(12px)}.showcase-number{left:23px;color:#f2f7ff;font-family:Display}.showcase-number span{color:#94a8bf}.showcase-badge{right:20px;border:1px solid #ffffff24;border-radius:8px;background:#0913269e;padding:6px 10px;color:#d9e7f9;font-size:9px}
.showcase-info{padding:19px 28px 24px;flex:none;position:relative;background:linear-gradient(180deg,#17223b,#121d32)}.showcase-type{font-size:8px;letter-spacing:2px;color:var(--card-accent)}.showcase-info h2{font-size:32px;letter-spacing:-1px;line-height:1.15;margin:9px 0}.showcase-info p{font-size:12px;color:#b2bfd3;line-height:1.65;margin:0 0 20px;max-width:370px}.showcase-play{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;min-height:48px;border:1px solid color-mix(in srgb,var(--card-accent) 55%,#526078);border-radius:13px;color:#effaff;background:linear-gradient(110deg,color-mix(in srgb,var(--card-accent) 19%,#15233c),#263049);font:600 12px Display;letter-spacing:2px;box-shadow:inset 0 1px #ffffff12;transition:filter .2s,transform .2s}.showcase-play:hover{filter:brightness(1.25)}.showcase-play:active{transform:translateY(2px)}.showcase-play svg{width:19px}
.library-navigation{position:absolute;right:clamp(20px,5vw,100px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:21px}.library-nav{height:42px;width:42px;border-radius:50%}.library-nav:disabled{opacity:.25}.library-position{display:flex;flex-direction:column;text-align:center;gap:5px}.library-position strong{font:32px Display;color:#eaf5ff}.library-position span{color:#7187a6;font-size:10px;letter-spacing:1px}.library-meter{height:72px;width:2px;background:#a4cfff20;overflow:hidden}.library-meter span{display:block;background:linear-gradient(#a2e5ff,#bc9ff5);width:100%;transition:height .35s}
.library-bottom{display:flex;justify-content:space-between;align-items:center;padding:17px clamp(20px,4vw,76px) 23px;gap:20px;flex:none;color:#8b9fb9;font-size:10px}.library-scroll-hint{display:flex;align-items:center;gap:10px}.library-scroll-hint i{display:block;width:13px;height:19px;border:1px solid #819bb870;border-radius:8px;position:relative}.library-scroll-hint i:after{content:"";position:absolute;top:4px;left:5px;width:1px;height:5px;background:#b8d7ec;animation:library-scroll 1.8s ease-in-out infinite}.library-total{font-size:9px;letter-spacing:1px}.library-sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.library-empty{position:absolute;inset:0;display:grid;place-items:center;color:#c2cfe5}
.library-scene[data-view=grid] .library-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;align-content:start;gap:22px;scroll-snap-type:none;padding:24px clamp(20px,4vw,76px) 34px;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent);scrollbar-width:thin;scrollbar-color:#536987 transparent}.library-scene[data-view=grid] .showcase-item{width:100%;height:310px;transform:none;opacity:1;filter:none;scroll-snap-align:none}.library-scene[data-view=grid] .showcase-card{border-radius:20px;border-color:#91a8cc30}.library-scene[data-view=grid] .showcase-item.is-selected .showcase-card{border-color:var(--card-accent)}.library-scene[data-view=grid] .showcase-info{padding:13px 17px 17px}.library-scene[data-view=grid] .showcase-type{font-size:7px;letter-spacing:1px}.library-scene[data-view=grid] h2{font-size:21px;letter-spacing:-.6px;margin:7px 0}.library-scene[data-view=grid] .showcase-info p{font-size:10px;line-height:1.5;height:30px;margin-bottom:12px}.library-scene[data-view=grid] .showcase-play{padding:10px 12px;min-height:39px;font-size:10px}.library-scene[data-view=grid] .showcase-number{top:14px;left:16px}.library-scene[data-view=grid] .showcase-badge{top:12px;right:12px;font-size:8px;padding:4px 6px}.library-scene[data-view=grid] .library-navigation{display:none}.library-scene[data-view=grid] .showcase-visual:hover canvas{transform:scale(1.04)}.library-scene.is-switching .showcase-card{animation:library-card-in .45s cubic-bezier(.2,.75,.3,1) both}
@keyframes library-card-in{from{opacity:.3;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes library-scroll{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(4px);opacity:1}}
@media(min-width:1700px){.library-scene[data-view=grid] .library-track{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){.library-scene[data-view=grid] .library-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.library-navigation{right:22px}}
@media(max-width:650px){.library-bar{height:66px;padding:0 18px;gap:10px}.library-brand{width:108px}.library-bar-actions{gap:6px}.library-icon-button{min-width:34px;width:34px;height:38px;border-radius:10px}.library-icon-button svg{width:16px}.library-view{width:44px;min-width:44px;height:44px;padding:0;border-radius:11px}.library-view svg{width:15px}.library-heading{padding:20px 22px 10px;align-items:start;flex-direction:column;gap:12px}.library-heading h1{font-size:24px;margin-top:4px}.library-kicker{font-size:8px;letter-spacing:2px}.library-stage{--card-h:clamp(285px,77cqh,580px)}.library-track{padding-inline:22px;gap:28px}.showcase-item{width:100%}.showcase-card{border-radius:23px}.showcase-info{padding:15px 20px 19px}.showcase-info h2{font-size:27px}.showcase-info p{font-size:11px;margin-bottom:15px}.showcase-type{font-size:7px;letter-spacing:1.5px}.showcase-play{min-height:45px;padding:12px 15px}.showcase-badge{top:15px;right:15px}.showcase-number{top:20px;left:19px}.library-navigation{right:22px;top:-31px;transform:none;flex-direction:row;gap:8px}.library-nav,.library-meter{display:none}.library-position{flex-direction:row;align-items:baseline;gap:5px}.library-position strong{font-size:16px}.library-position span{font-size:9px}.library-bottom{padding:13px 22px 18px;font-size:9px}.library-total{display:none}.library-search{width:100%;padding:10px 12px}.library-scene[data-view=grid] .library-track{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 16px 24px;gap:12px}.library-scene[data-view=grid] .showcase-item{height:265px}.library-scene[data-view=grid] .showcase-card{border-radius:16px}.library-scene[data-view=grid] .showcase-info{padding:11px 12px 13px}.library-scene[data-view=grid] h2{font-size:16px;min-height:37px}.library-scene[data-view=grid] .showcase-type{font-size:6px;letter-spacing:.7px}.library-scene[data-view=grid] .showcase-info p{display:none}.library-scene[data-view=grid] .showcase-number{font-size:8px;left:12px;top:15px}.library-scene[data-view=grid] .showcase-number span{display:none}.library-scene[data-view=grid] .showcase-badge{font-size:7px;right:8px;top:10px}.library-scene[data-view=grid] .showcase-play{font-size:9px}}
@media(max-width:360px){.library-icon-button[data-join]{display:none}.library-bar{padding:0 14px}.library-heading{padding-inline:18px}.library-track{padding-inline:18px}}
@media(max-height:650px) and (orientation:landscape){.library-bar{height:57px}.library-heading{padding-top:13px;padding-bottom:7px}.library-heading h1{font-size:24px;margin-top:3px}.library-kicker{font-size:7px}.library-stage{--card-h:clamp(180px,76cqh,390px)}.showcase-item{width:min(680px,100%)}.showcase-card{flex-direction:row;border-radius:23px}.showcase-visual{width:47%;flex:1}.showcase-info{width:53%;display:flex;flex-direction:column;justify-content:center;padding:20px 23px}.showcase-info h2{font-size:26px}.showcase-info p{font-size:11px;margin-bottom:13px}.showcase-play{min-height:42px;padding:10px 13px}.library-bottom{padding-top:10px;padding-bottom:12px}.library-navigation{gap:12px;right:25px}.library-meter{height:35px}.library-scene[data-view=grid] .showcase-card{flex-direction:column}.library-scene[data-view=grid] .showcase-visual,.library-scene[data-view=grid] .showcase-info{width:100%}.library-scene[data-view=grid] .showcase-item{height:290px}}
@media(max-height:420px) and (orientation:landscape){.library-bar{height:48px}.library-brand{width:110px}.library-icon-button{height:34px}.library-heading{padding-top:8px;padding-bottom:5px}.library-heading h1{font-size:19px}.library-kicker{display:none}.library-bottom{padding-top:6px;padding-bottom:8px;font-size:8px}.library-stage{--card-h:clamp(150px,80cqh,260px)}.library-track{padding-inline:90px;gap:22px}.showcase-info{padding:13px 18px}.showcase-info h2{font-size:23px;margin:5px 0}.showcase-info p{font-size:10px;margin-bottom:9px}.showcase-type{font-size:6px}.showcase-play{min-height:36px;font-size:10px}.library-meter{display:none}.library-position strong{font-size:23px}.library-nav{width:33px;height:33px;min-width:33px}.library-navigation{gap:9px}.library-search{padding:6px 10px}.library-search input{font-size:10px}}
@media(prefers-reduced-motion:reduce){.showcase-item,.showcase-play,.showcase-visual canvas,.library-meter span{transition:none}.library-scene.is-switching .showcase-card,.library-scroll-hint i:after{animation:none}.library-track{scroll-behavior:auto}}

.showcase-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:color-mix(in srgb,var(--card-accent) 50%,#748399);font:18px Display;letter-spacing:5px;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--card-accent) 9%,transparent),transparent 65%)}
.showcase-placeholder>span{font:10px Body,Arial,sans-serif;letter-spacing:.5px;color:#8392aa}
.showcase-play:disabled{opacity:.5;filter:none;background:#ffffff06;border-color:#ffffff20;justify-content:center;transform:none}
.library-scene[data-view=grid] .showcase-placeholder{font-size:14px;letter-spacing:3px}
.library-scene[data-view=grid] .showcase-placeholder>span{font-size:9px;letter-spacing:0}

.library-scene[data-view=focus] .library-heading{display:none}
.library-heading{justify-content:flex-end}
@media(max-width:650px){.library-navigation{top:16px}}

/* Game-specific promotional artwork; keep the whole composition readable. */
.showcase-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#0b1225;transition:filter .25s}
.showcase-visual::after{background:linear-gradient(0deg,#101a3226,transparent 18%);}
.showcase-number{padding:5px 8px;top:12px;left:12px;border:1px solid #ffffff24;border-radius:8px;background:#07101fb8;text-shadow:0 1px 3px #000}
.library-scene[data-view=focus] .library-stage{--card-h:min(515px,calc(100cqh - 40px),calc((100vw - 44px) * 2 / 3 + 182px))}
.library-scene[data-view=grid] .showcase-item,.library-scene[data-view=grid] .showcase-card{height:auto}
.library-scene[data-view=grid] .showcase-visual{flex:none;aspect-ratio:3/2}
.library-scene[data-view=grid] .showcase-art{object-fit:cover}
.library-scene[data-view=grid] .showcase-visual:hover .showcase-art{filter:brightness(1.08)}
@media(max-height:650px) and (orientation:landscape){.library-scene[data-view=focus] .library-stage{--card-h:clamp(150px,76cqh,390px)}}
@media(prefers-reduced-motion:reduce){.showcase-art{transition:none}}