.poster-showcase{margin:0 0 30px!important}
.poster-heading{display:flex;justify-content:space-between;gap:16px;margin:0 0 12px;font-size:9px;font-weight:700;letter-spacing:1.6px;color:var(--muted)}
.poster-heading span:last-child{font-weight:400;letter-spacing:.2px}
.poster-panels{display:flex;gap:5px;height:470px;border-radius:22px;overflow:hidden;background:#0e1423;padding:5px;box-shadow:0 18px 45px #18294020}
.poster-panel{position:relative;isolation:isolate;flex:1;min-width:0;overflow:hidden;border-radius:17px;background:#17263c;color:#fff;transition:flex .7s cubic-bezier(.2,.75,.2,1)}
.poster-panels:has(.is-active) .poster-panel{flex:.65}.poster-panels .poster-panel.is-active{flex:3.1}
.poster-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.045);filter:saturate(.8);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s}
.is-active .poster-art{transform:scale(1);filter:saturate(1)}
.poster-bounzy .poster-art{object-position:50% 40%}.poster-blast .poster-art{object-position:50% 30%}.poster-astral .poster-art{object-position:50% 12%}.poster-human .poster-art{object-position:50% 50%;filter:brightness(.65)}
.poster-shade{position:absolute;inset:0;background:linear-gradient(180deg,#070e2340 0%,transparent 30%,#070e2370 55%,#070e23f5 100%);pointer-events:none}
.poster-platform{position:absolute;top:17px;left:14px;right:10px;font-size:8px;font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 1px 6px #000;z-index:2}
.poster-select{position:absolute;inset:0;width:100%;border:0;background:transparent;z-index:3;border-radius:17px}.poster-select:focus-visible{outline:3px solid #a4eaf0;outline-offset:-5px}
.poster-copy{position:absolute;bottom:25px;left:17px;right:17px;z-index:4;pointer-events:none}
.poster-index{font-size:8px;letter-spacing:1.2px;color:#c6d8ea;white-space:nowrap;display:block}
.poster-copy h2{font:800 clamp(17px,2.2vw,26px)/1.15 Manrope,sans-serif;letter-spacing:-.8px;text-decoration:none;margin:12px 0 0;overflow-wrap:normal;color:#fff}
.poster-info{display:grid;grid-template-rows:0fr;opacity:0;max-height:0;overflow:hidden;transform:translateY(15px);transition:max-height .65s cubic-bezier(.2,.75,.2,1),opacity .35s,transform .5s}
.is-active .poster-info{display:block;max-height:240px;opacity:1;transform:translateY(0);transition-delay:.12s}
.poster-info p{font-size:13px;line-height:1.6;margin:14px 0 10px;min-width:180px;color:#eef4ff}
.poster-status{display:block;color:#b6ccdf;font-size:10px;line-height:1.5;margin:8px 0 16px}
.poster-actions{display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto;visibility:hidden}.is-active .poster-actions{visibility:visible}
.poster-actions a,.poster-actions button{font:600 11px/1.5 'DM Sans',sans-serif;padding:10px 12px;border-radius:8px;border:1px solid #ffffff50;background:#ffffff12;color:white;white-space:nowrap;min-height:40px;cursor:pointer;transition:background .2s,transform .2s}
.poster-actions button{background:#f4f8ff;color:#142139;border-color:transparent}.poster-actions a:hover,.poster-actions button:hover{transform:translateY(-2px);background:#bcf5f6;color:#142139}
.poster-respawn{background:linear-gradient(155deg,#26374d,#111d2d 55%,#0b131f)}
.poster-type{position:absolute;top:105px;left:16px;font:900 58px/.94 Manrope,sans-serif;letter-spacing:-5px;color:#b5d9e51c;white-space:nowrap;transition:color .6s,transform .8s}.is-active .poster-type{color:#b5d9e54a;transform:translateX(12px)}.poster-type span{display:block;font:8px/1.5 monospace;letter-spacing:3px;margin:22px 0 0 4px;color:#aac4d8}
@media(min-width:701px){.poster-panels:has(.is-active) .poster-panel:not(.is-active) .poster-copy{left:10px;right:8px}.poster-panels:has(.is-active) .poster-panel:not(.is-active) h2{font-size:15px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.5px}.poster-panels:has(.is-active) .poster-panel:not(.is-active) .poster-index{display:none}}
@media(max-width:700px){.poster-heading{font-size:8px}.poster-heading span:last-child{display:none}.poster-panels{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:10px;padding:0;background:none;box-shadow:none;border-radius:0}.poster-panel{min-height:320px;border-radius:16px}.poster-panel:last-child{grid-column:1/-1;min-height:260px}.poster-copy{left:15px;right:15px;bottom:18px}.poster-copy h2{font-size:22px}.poster-info,.is-active .poster-info{display:block;opacity:1;max-height:260px;transform:none}.poster-info p{min-width:0;font-size:12px}.poster-actions{visibility:visible}.poster-actions a,.poster-actions button{font-size:10px;padding:9px}.poster-index{font-size:7px}.poster-platform{font-size:7px}.poster-type{top:55px;left:auto;right:25px}}
@media(max-width:440px){.poster-panels{grid-template-columns:1fr}.poster-panel{min-height:350px}.poster-panel:last-child{min-height:280px}.poster-copy h2{font-size:28px}.poster-info p{max-width:260px}.poster-actions a,.poster-actions button{font-size:12px}.poster-art{object-position:center 32%}.poster-astral .poster-art{object-position:center 18%}}
@media(prefers-reduced-motion:reduce){.poster-panel,.poster-art,.poster-info,.poster-type{transition:none!important}}

@media(min-width:701px){.poster-copy h2{font-size:18px}.poster-panel.is-active h2{font-size:26px}}@media(max-width:700px){.poster-select{display:none}}
/* Stable hover intent and continuous layout interpolation. */
.poster-panel{transition:flex-grow .95s cubic-bezier(.22,.61,.36,1);will-change:flex-grow}
.poster-info{display:block;grid-template-rows:none}.poster-rail-title{display:none}
@media(min-width:701px){
.poster-copy,.poster-panels:has(.is-active) .poster-panel:not(.is-active) .poster-copy{left:20px;right:20px;bottom:28px}
.poster-copy h2,.poster-panels:has(.is-active) .poster-panel:not(.is-active) h2{writing-mode:horizontal-tb;transform:none;font-size:26px;letter-spacing:-.8px;min-width:220px;transition:opacity .3s,transform .55s}
.poster-panels .poster-panel:not(.is-active) .poster-copy>h2{opacity:0;transform:translateY(14px)}
.poster-panels .poster-panel:not(.is-active) .poster-index{display:block;opacity:0}
.poster-index{transition:opacity .4s}.is-active .poster-index{transition-delay:.25s}
.poster-rail-title{display:block;position:absolute;bottom:0;left:0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 15px/1.2 Manrope,sans-serif;white-space:nowrap;transition:opacity .25s;opacity:1}
.is-active .poster-rail-title{opacity:0}
.poster-info,.is-active .poster-info{max-height:230px;min-width:230px;transition:opacity .4s,transform .6s;display:block}
.poster-panel:not(.is-active) .poster-info{visibility:hidden;opacity:0;transform:translateY(18px);transition:opacity .2s,transform .4s,visibility 0s .2s}
.is-active .poster-info{visibility:visible;transition-delay:.25s}
}
.poster-bounzy .poster-art,.poster-blast .poster-art,.poster-astral .poster-art,.poster-human .poster-art{object-position:50% 35%;filter:saturate(.95);transform:scale(1.03)}
.poster-panel.is-active .poster-art{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.poster-panel{transition:flex-grow .2s ease!important}.poster-copy h2,.poster-info,.poster-rail-title{transform:none!important;transition:opacity .15s!important}}

/* Auto-advance timeline under the posters. */
.poster-timeline{display:flex;align-items:flex-start;gap:14px;margin:14px 4px 0}
.timeline-toggle{flex-shrink:0;width:34px;height:34px;margin-top:-4px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-size:11px;line-height:1;transition:border-color .25s,transform .25s}
.timeline-toggle:hover{border-color:var(--green);transform:translateY(-1px)}
.timeline-track{flex:1;display:flex;gap:8px}
.timeline-seg{flex:1;min-width:0;padding:6px 0 0;border:0;background:none;text-align:left;cursor:pointer}
.timeline-bar{display:block;height:4px;border-radius:4px;background:color-mix(in srgb,var(--muted) 28%,transparent);overflow:hidden}
.timeline-fill{display:block;height:100%;transform:scaleX(0);transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,var(--green),#7fe3dc)}
.timeline-seg.done .timeline-fill{transform:scaleX(1);opacity:.45}
.timeline-seg em{display:block;margin-top:7px;font-style:normal;font-size:10px;letter-spacing:.3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.timeline-seg.active em,.timeline-seg:hover em{color:var(--text)}
.timeline-seg:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:6px}

/* Phones: a swipeable carousel instead of a long stacked grid. */
@media(max-width:700px){
 .poster-panels{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px;padding:0 7%;margin:0 -18px;scrollbar-width:none}
 .poster-panels::-webkit-scrollbar{display:none}
 .poster-panel,.poster-panel:last-child{flex:0 0 86%;min-height:440px;scroll-snap-align:center}
 .poster-panels:has(.is-active) .poster-panel,.poster-panels .poster-panel.is-active{flex:0 0 86%}
 .poster-panel:not(.is-active){opacity:.6;scale:.96}
 .poster-panel{transition:opacity .45s,scale .45s}
 .timeline-seg em{font-size:9px}
}

/* Blast Rivals poster: keep the title in frame when the panel is wide. */
.poster-panels .poster-blast .poster-art{object-position:50% 18%}