/* The store is a distinct action at the end of the dropdown. */
.site-header,.site-header.is-scrolled{gap:38px}
.nav-store{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:100px;height:42px;padding:0 16px;flex-shrink:0;border:1px solid #ff782870;border-radius:6px;background:#1b2117;color:#f2eddf;text-decoration:none;font:600 13px var(--body)}
.nav-store svg{width:18px;height:20px;color:#ff8c46;flex-shrink:0}
.nav-store:focus-visible,.footer-store:focus-visible{outline:2px solid #ff7828;outline-offset:5px}
.footer-actions{display:flex;align-items:stretch;gap:14px}
.footer-actions .footer-discord,.footer-store{min-width:240px;min-height:90px;padding:22px 28px}
.footer-store{display:flex;align-items:center;justify-content:space-between;gap:42px;border:1px solid #ff782870;border-radius:5px;background:#121710;color:#e8ecdf;text-decoration:none;font:600 24px var(--body)}
.footer-store svg{width:34px;height:38px;color:#ff8c46}
/* Four suits, with a steady hit area and a portrait silhouette. */
.story-hand{--cw:clamp(180px,min(18vw,33svh),270px);--ch:calc(var(--cw) * 1.62)}
.story-police{--spread:calc(var(--cw) * -.93);--angle:-14deg;--rise:32px;z-index:1}
.story-medic{--spread:calc(var(--cw) * -.31);--angle:-4.5deg;--rise:0px;z-index:3;--tone:#8bc8c9;--tint:#1e3d3e}
.story-criminal{--spread:calc(var(--cw) * .31);--angle:4.5deg;--rise:0px;z-index:4}
.story-citizen{--spread:calc(var(--cw) * .93);--angle:14deg;--rise:32px;z-index:2}
.story-flight[data-story=medic]{--tone:#8bc8c9;--tint:#1e3d3e}
.story-card-title{font-size:clamp(21px,1.9vw,30px)}
.story-quick-select{display:none}
@media(max-width:1100px){.footer-top{flex-wrap:wrap}.footer-actions{margin-left:auto}}
@media(max-width:800px){
 .story-hand{--cw:clamp(175px,27vw,220px)}
 .story-quick-select{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:4px 0 16px;direction:rtl}
 .story-quick-select button{display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #ffffff20;border-radius:5px;background:#171e15;color:#c6cbbb;font:12px var(--body);cursor:pointer;transition:border-color .2s,color .2s}
 .story-quick-select button span{font:18px Georgia,serif;color:#b2c9ce}
 .story-quick-select [data-story-open=medic] span{color:#8bc8c9}.story-quick-select [data-story-open=criminal] span{color:#cf9789}.story-quick-select [data-story-open=citizen] span{color:#c9bc8f}
 .story-quick-select button:hover,.story-quick-select button:focus-visible{border-color:#ff7828;color:#ff8c46;outline:none}
 .story-card-title{font-size:23px}
}
@media(max-width:600px){
 .site-header,.site-header.is-scrolled{gap:10px;padding-inline:12px;max-width:calc(100% - 20px)}
 .nav-store{min-width:70px;height:38px;padding:0 9px;gap:6px;font-size:11px}.nav-store svg{width:15px;height:17px}
 .site-header .brand{gap:8px}.site-header .brand-name{font-size:16px}.site-header .brand-mark,.site-header .brand-mark img{width:34px;height:34px}.site-header .menu-toggle{width:36px;flex-shrink:0}
 .story-hand{--cw:clamp(128px,36vw,190px);height:calc(var(--ch) + 68px)}
 .story-police{--spread:calc(var(--cw) * -.42);--angle:-8deg;--rise:22px}.story-medic{--spread:calc(var(--cw) * -.14);--angle:-3deg}.story-criminal{--spread:calc(var(--cw) * .14);--angle:3deg}.story-citizen{--spread:calc(var(--cw) * .42);--angle:8deg;--rise:22px}
 .story-card-title{font-size:17px;left:15px;right:15px;bottom:38px}.story-card-title small{font-size:8px}.story-card-portrait{top:43px;height:47%}.story-card-action{bottom:14px;left:28px;right:28px;font-size:4px;letter-spacing:0}.story-corner-opposite{bottom:12px;right:12px;font-size:9px}.story-corner-opposite>span{font-size:17px}.story-quick-select{gap:5px}.story-quick-select button{font-size:11px;padding:8px 10px}
 .footer-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
 .footer-actions .footer-discord,.footer-store{min-width:0;min-height:80px;width:100%;padding:18px;gap:14px;font-size:20px}.footer-actions svg{width:27px;height:30px}
}
@media(max-width:380px){.footer-actions{grid-template-columns:1fr}.story-quick-select button{padding-inline:8px}}

.site-header .studio-menu a.nav-store{height:54px;min-height:54px;width:100%;margin-top:16px;padding:0 18px;gap:14px;justify-content:center;border:1px solid #ff782880;border-radius:6px;background:#202419;font:600 16px var(--body);animation-delay:.64s}
.site-header .studio-menu a.nav-store svg{width:20px;height:22px}.site-header .studio-menu a.nav-store span{display:block}
.site-header .studio-menu a:nth-of-type(4){animation-delay:.52s}
.site-header .studio-menu a.nav-store:nth-of-type(5){animation-delay:.64s}

/* Move vertically without promoting any card above its existing neighbours. */
@media(hover:hover) and (pointer:fine){
 .story-card{overflow:visible;translate:0 0;transition:translate .38s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
 .story-card:hover,.story-card:focus-visible{translate:0 -16px}
 /* Keep the vacated lower edge hittable so the lift cannot flicker under the pointer. */
 .story-card::after{content:'';display:block;position:absolute;inset:0 -5px -23px;background:none;border:0;pointer-events:auto;z-index:-1}
 .story-card .story-foil{border-radius:9px;transform:none;background-size:300% 100%;background-position:100% 0;opacity:0;transition:opacity .3s;pointer-events:none}
 .story-card:hover .story-foil,.story-card:focus-visible .story-foil{animation:story-lift-shine 1.1s ease both;opacity:1}
}
@keyframes story-lift-shine{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.story-card:hover,.story-card:focus-visible{translate:0 0}.story-card .story-foil{animation:none!important}.story-card{transition:none}}