:root{--grid-card-bg: rgba(15,20,30,0.4);--card-hover-bg: rgba(20,25,35,0.6);--card-active-bg: rgba(25,30,40,0.8);--card-border: rgba(255,255,255,0.1);--card-hover-border: rgba(255,255,255,0.2);--card-shadow: 0 8px 32px rgba(0,0,0,0.3);--card-hover-shadow: 0 16px 48px rgba(0,0,0,0.4);--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);--transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.roleplay-section{position:relative;width:100%;min-height:90vh;background:url("/images/bacbg1ound/interactivebg.webp") no-repeat center center;background-size:cover;background-attachment:fixed;padding:4rem 0;overflow:hidden;z-index:1}.roleplay-section::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:1}.roleplay-section .container{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 2rem}.roleplay-section .section-header{text-align:center;margin-bottom:1rem;position:relative;z-index:3}.roleplay-section .section-header .section-number{font-size:1.1rem;font-weight:600;color:rgba(91,155,213,.9);text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem;display:block;text-shadow:0 0 20px rgba(91,155,213,.5)}.roleplay-section .section-header .section-title{font-size:3.5rem;font-weight:800;color:#fff !important;line-height:1;margin-bottom:.75rem;text-shadow:0 4px 30px rgba(0,0,0,.5);opacity:1 !important;visibility:visible !important;display:block !important}.roleplay-section .section-header .section-title span{display:block;font-size:.4em;font-weight:400;opacity:.8;margin-top:.5rem;text-transform:uppercase;letter-spacing:.1em;color:hsla(0,0%,100%,.7)}.roleplay-section .section-header .section-subtitle{font-size:1.2rem;color:hsla(0,0%,100%,.7) !important;max-width:800px;margin:0 auto;line-height:1.6;text-shadow:0 2px 10px rgba(0,0,0,.3);opacity:1 !important;visibility:visible !important;display:block !important}.roleplay-section .section-header .subtitle{font-size:1.5rem;margin-bottom:1rem}.roleplay-section .section-header .description{font-size:1.1rem;line-height:1.4}@media(max-width: 1200px){.roleplay-section .section-header .section-title{font-size:3rem}}@media(max-width: 768px){.roleplay-section .section-header{margin-bottom:3rem}.roleplay-section .section-header .section-title{font-size:2.5rem}.roleplay-section .section-header .section-subtitle{font-size:1.1rem;padding:0 1rem}}.roleplay-section .grid-cards{margin-top:.5rem;display:flex;min-height:500px;gap:1.5rem;align-items:stretch;perspective:1000px}.roleplay-section .grid-card{position:relative;flex:1;overflow:hidden;border-radius:1.5rem;background:var(--grid-card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);cursor:pointer;transition:all .5s cubic-bezier(0.4, 0, 0.2, 1)}.roleplay-section .grid-card:focus-visible{outline:3px solid rgba(91,155,213,.5);outline-offset:2px}.roleplay-section .grid-card:hover:not(.active){transform:translateY(-5px)}.roleplay-section .grid-card .card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:all .5s cubic-bezier(0.4, 0, 0.2, 1)}.roleplay-section .grid-card:hover .card-bg,.roleplay-section .grid-card.active .card-bg{transform:scale(1.05);filter:brightness(0.85)}.roleplay-section .grid-card .card-overlay{position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);color:#fff;transform:translateY(30%);opacity:0;transition:all .4s ease}.roleplay-section .grid-card .card-overlay .card-header{margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}.roleplay-section .grid-card .card-overlay .card-header .card-icon{font-size:1.5rem;opacity:.9}.roleplay-section .grid-card .card-overlay .card-header .card-title-group h3{font-size:1.75rem;font-weight:700;margin-bottom:.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.roleplay-section .grid-card .card-overlay .card-header .card-title-group p{font-size:1rem;opacity:.9;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.roleplay-section .grid-card .card-overlay .card-description p{font-size:1rem;line-height:1.5;margin-bottom:1.5rem;text-shadow:0 1px 2px rgba(0,0,0,.3);opacity:.9}.roleplay-section .grid-card .card-overlay .card-description p.details{display:none;font-size:.95rem;opacity:.8}.roleplay-section .grid-card .card-overlay .card-description .btn-details{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:rgba(91,155,213,.9);border:none;border-radius:2rem;color:#fff;font-weight:600;text-decoration:none;transition:all .3s ease}.roleplay-section .grid-card .card-overlay .card-description .btn-details:hover{background:#5b9bd5;transform:translateY(-2px)}.roleplay-section .grid-card .card-overlay .card-description .btn-details::after{content:"→";transition:transform .3s ease}.roleplay-section .grid-card .card-overlay .card-description .btn-details:hover::after{transform:translateX(4px)}.roleplay-section .grid-card:hover .card-overlay,.roleplay-section .grid-card.active .card-overlay{transform:translateY(0);opacity:1}.roleplay-section .grid-card.active{flex:2;transform:translateZ(10px)}.roleplay-section .grid-card.active .card-bg{transform:scale(1.05);filter:brightness(0.3)}.roleplay-section .grid-card.active .card-description p.details{display:block}.grid-cards:has(.active) .roleplay-section .grid-card:not(.active){flex:.75;filter:brightness(0.7);transform:scale(0.98)}@media(max-width: 1200px){.roleplay-section .grid-cards{flex-wrap:wrap;gap:2rem}.roleplay-section .grid-card{flex:1 1 calc(50% - 1rem);min-height:400px}.roleplay-section .grid-card.active{flex:1 1 100%}.roleplay-section .grid-card.active .card-details{width:60%}}@media(max-width: 768px){.roleplay-section .container{padding:2rem 1rem}.roleplay-section .grid-cards{gap:1rem}.roleplay-section .grid-card{flex:1 1 100%;min-height:350px}.roleplay-section .grid-card.active .card-details{position:relative;width:100%;right:0;padding:1.5rem;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);border-radius:1rem;margin-top:1rem}.roleplay-section .grid-card .card-overlay{padding:1.5rem}.roleplay-section .grid-card .card-overlay h3{font-size:1.5rem}}