.retro-btn{--rb-face:#ec4e53;--rb-side:#7e2f2f;--rb-border:#a83c3c;--rb-text:#f3ede1;text-transform:uppercase;width:100%;font-family:var(--century-gothic), Century Gothic, Futura, sans-serif;background:0 0;display:inline-block;position:relative}.retro-btn.inactive{--rb-face:#eb2029;--rb-side:#5e1f1f;--rb-border:#970e14}.retro-btn.active{--rb-face:#a41e21;--rb-side:#47191a;--rb-border:#680a0e;--rb-text:#ddd3c5}.retro-btn .btn:hover{--rb-text:#d0c5b6;--rb-border:#12121280;--rb-face:#a01a21}.retro-btn .btn.btn-active{--rb-text:#bfb3a4;--rb-border:#0f0f0f99}.retro-btn .btn{user-select:none;box-sizing:border-box;cursor:pointer;letter-spacing:.05em;text-align:center;width:100%;height:54px;color:inherit;z-index:5;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;background:0 0;border:0;padding-top:3px;font-size:17px;font-weight:700;line-height:50px;text-decoration:none;transition:opacity .1s ease-out;display:block;position:relative}.retro-btn .btn,.retro-btn .btn:focus{outline:none}.retro-btn .btn:focus-visible{outline-offset:2px;outline:2px solid #f97d7d}.retro-btn .btn:hover .btn-content-inner:before{background-color:#0d0d0d1a}.retro-btn .btn:before{content:" ";z-index:1;background-color:#0d0d0d4d;border-radius:3px;width:calc(100% - 2px);height:calc(100% - 4px);transition:transform .12s ease-out,background .12s ease-out;position:absolute;bottom:-1px;left:1px}.retro-btn .btn-zone{z-index:20;cursor:pointer;position:absolute;top:0;bottom:0}.retro-btn .btn-zone-left{width:30%;left:0}.retro-btn .btn-zone-center{width:35%;left:30%}.retro-btn .btn-zone-right{width:35%;left:65%}.retro-btn .btn-inner .content-wrapper .btn-content{background-color:var(--rb-face);color:#e9e7e0;border:1px solid var(--rb-border);box-sizing:border-box;z-index:3;border-radius:3px;flex:1;justify-content:center;align-items:center;padding:0 16px;transition:border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out;display:flex;position:relative;overflow:hidden}.retro-btn .btn:has(.btn-zone-left:hover):before{transform:skewY(1deg)translateY(-.5px)}.retro-btn .btn:has(.btn-zone-left:hover) .btn-content{transform:skewY(-1deg)}.retro-btn .btn:has(.btn-zone-right:hover):before{transform:skewY(-1deg)translateY(-.5px)}.retro-btn .btn:has(.btn-zone-right:hover) .btn-content{transform:skewY(1deg)}.retro-btn .btn:has(.btn-zone-center:hover):before{transform:translateY(-2.5px)}.retro-btn .btn:has(.btn-zone-center:hover) .btn-content{transform:translateY(1.75px)}.retro-btn .btn:has(.btn-zone-left:hover) .btn-inner .content-wrapper .btn-content{background-image:linear-gradient(90deg,#0000,#ffffff14)}.retro-btn .btn:has(.btn-zone-right:hover) .btn-inner .content-wrapper .btn-content{background-image:linear-gradient(270deg,#0000,#ffffff14)}.retro-btn.active .btn:not(.btn-left):not(.btn-right):not(.btn-center):before{transform:translateY(-1.5px)}.retro-btn.active .btn:not(.btn-left):not(.btn-right):not(.btn-center) .btn-content{transform:translateY(1.25px)}@media (prefers-reduced-motion:reduce){.retro-btn .btn,.retro-btn .btn:before,.retro-btn .btn-inner .content-wrapper,.retro-btn .btn-inner .content-wrapper:before,.retro-btn .btn-inner .content-wrapper .btn-content,.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner{transition:none}}.retro-btn .btn-inner{height:100%;display:block}.retro-btn .btn-inner .content-wrapper{align-items:stretch;width:100%;height:calc(100% - 3px);margin-top:-3px;display:flex;position:relative}.retro-btn .btn-inner .content-wrapper:before,.retro-btn .btn-inner .content-wrapper:after,.retro-btn .btn-inner .content-wrapper .btn-content:before,.retro-btn .btn-inner .content-wrapper .btn-content:after,.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner:before{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.retro-btn .btn-inner .content-wrapper:before{background-color:var(--rb-side);content:" ";z-index:1;border-radius:3px;transition:transform .185s ease-out,background .185s ease-out;top:auto;bottom:-3px}.retro-btn .btn-inner .content-wrapper:after{content:" ";z-index:3;background-color:#0d0d0d26;border-radius:3px;width:0;top:2px}.retro-btn .btn-inner .content-wrapper .btn-content:before,.retro-btn .btn-inner .content-wrapper .btn-content:after{color:#fffc;opacity:0;justify-content:center;align-items:center;transition:opacity .1125s ease-out 50ms,transform .185s ease-out 50ms;display:flex}.retro-btn .btn-inner .content-wrapper .btn-content:before{content:" ";transform:translateY(50%)}.retro-btn .btn-inner .content-wrapper .btn-content:after{content:" ";transform:translateY(-50%)}.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner{transition:opacity 75ms ease-out .1125s;display:block}.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner:before{content:attr(label);letter-spacing:.1em;color:#f7f1e6;text-shadow:-1px -1px #ffffff4d,0 1px #8a7f6c,0 2px #4a4336,0 5px 8px #00000080;opacity:1;z-index:-1;padding-top:0;font-family:inherit;font-size:1.2em;font-weight:900;transition:opacity .3s ease-out,background-color .1125s ease-in,color .185s ease-out}.retro-btn .btn.btn-active .btn-inner .content-wrapper .btn-content{background-color:#721819;background-image:none;border-width:4px 2px 1px;transition:transform .12s ease-out,background .12s ease-out,color .12s ease-out;transform:translateY(2.5px)}.retro-btn .btn.btn-active:before{transform:translateY(-4px)}@media (width<=380px){.retro-btn .btn-inner .content-wrapper .btn-content{padding:0 6px}.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner:before{letter-spacing:.02em;font-size:.85em}}@media (prefers-reduced-motion:reduce){.retro-btn .btn.btn-active .btn-inner .content-wrapper .btn-content{transition:none}}