/* L2LibertySub - Área independiente 2.1.0 */
.ls-area {
    position: relative;
    isolation: isolate;
    min-height: 720px;
    padding: 110px 20px 90px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(4,6,12,.82), rgba(5,7,13,.97)),
        url("../../ForcePlay/img/bg.jpg") center top / cover fixed no-repeat;
    border-top: 2px solid #c9a33e;
    border-bottom: 2px solid #c9a33e;
}
.ls-area__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 24%, rgba(104,245,151,.12), transparent 30%),
        radial-gradient(circle at 78% 35%, rgba(117,79,216,.20), transparent 34%),
        linear-gradient(120deg, transparent 0 48%, rgba(220,183,71,.05) 50%, transparent 52%);
    animation: lsAmbient 12s ease-in-out infinite alternate;
}
@keyframes lsAmbient { from { transform: scale(1); opacity: .72; } to { transform: scale(1.05); opacity: 1; } }
.ls-area__container { width: min(1180px, 100%); margin: 0 auto; }
.ls-kicker { display: block; color: #d8b84d; font-size: 12px; letter-spacing: 3px; font-weight: 800; }

.ls-hero, .ls-page-header {
    padding: 48px;
    border: 1px solid rgba(219,184,76,.72);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(13,16,28,.95), rgba(28,22,52,.88));
    box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 0 42px rgba(115,85,191,.11);
}
.ls-hero h1, .ls-page-header h1 {
    margin: 12px 0 15px;
    color: #fff;
    font-size: clamp(38px, 6vw, 72px);
    line-height: .96;
    text-transform: uppercase;
}
.ls-hero p, .ls-page-header p { max-width: 760px; color: #c8cad4; font-size: 16px; line-height: 1.7; }
.ls-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ls-button {
    display: inline-flex; min-height: 48px; padding: 0 22px; align-items: center; justify-content: center;
    border: 1px solid #b99838; border-radius: 12px; color: #fff; text-decoration: none;
    background: rgba(0,0,0,.28); transition: .25s ease;
}
.ls-button:hover { transform: translateY(-2px); border-color: #70f59e; box-shadow: 0 0 24px rgba(82,240,135,.18); }
.ls-button--primary { color: #06110a; font-weight: 900; background: linear-gradient(135deg, #d8b84d, #70f29b); }

.ls-subnav {
    display: flex; gap: 8px; margin: 22px 0 34px; padding: 10px;
    overflow-x: auto; border: 1px solid rgba(219,184,76,.35); border-radius: 16px;
    background: rgba(8,10,17,.86);
}
.ls-subnav a {
    flex: 0 0 auto; padding: 12px 18px; border-radius: 10px; color: #aeb2c2;
    text-decoration: none; font-weight: 700; transition: .2s ease;
}
.ls-subnav a:hover, .ls-subnav a.is-active { color: #08120c; background: linear-gradient(135deg, #d8b84d, #72f39c); }

.ls-section { margin-top: 24px; padding: 38px; border: 1px solid rgba(219,184,76,.34); border-radius: 22px; background: rgba(8,10,17,.90); }
.ls-section__heading span { color: #73f29b; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.ls-section__heading h2 { margin: 8px 0 10px; color: #fff; font-size: clamp(26px, 4vw, 42px); }
.ls-section__heading p { color: #aeb2c2; line-height: 1.65; }
.ls-section__heading--row { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.ls-text-link { color: #d9b74c; text-decoration: none; white-space: nowrap; }

.ls-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.ls-feature-card {
    position: relative; min-height: 210px; padding: 25px; overflow: hidden;
    border: 1px solid rgba(219,184,76,.30); border-radius: 18px;
    background: linear-gradient(145deg, rgba(35,32,62,.72), rgba(8,10,17,.88)); transition: .25s ease;
}
.ls-feature-card:hover { transform: translateY(-5px); border-color: #76f39e; box-shadow: 0 18px 35px rgba(0,0,0,.28); }
.ls-feature-card b { position: absolute; top: 10px; right: 16px; color: rgba(255,255,255,.06); font-size: 64px; }
.ls-feature-card span { color: #d6b54a; font-size: 10px; letter-spacing: 2px; font-weight: 900; }
.ls-feature-card h3 { margin: 16px 0 12px; color: #fff; font-size: 25px; }
.ls-feature-card p { color: #aeb2c2; line-height: 1.55; }

.ls-pvp-table { margin-top: 26px; overflow: hidden; border: 1px solid rgba(219,184,76,.30); border-radius: 16px; }
.ls-pvp-table__head, .ls-pvp-table__row {
    display: grid; grid-template-columns: 60px 2fr 1fr 90px 90px;
    align-items: center; gap: 12px; padding: 14px 18px;
}
.ls-pvp-table__head { color: #d8b84d; background: rgba(216,184,77,.08); font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.ls-pvp-table__row { color: #d9dbe3; border-top: 1px solid rgba(255,255,255,.06); transition: .2s ease; }
.ls-pvp-table__row:hover { background: rgba(101,245,150,.07); }
.ls-pvp-player { display: flex; align-items: center; gap: 10px; }
.ls-pvp-player img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; border: 1px solid #b99838; }
.ls-pvp-count { color: #68f595; font-weight: 900; }
.ls-pk-count { color: #ff7575; font-weight: 900; }
.ls-pvp-table__empty { padding: 30px; text-align: center; color: #aeb2c2; }

.ls-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.ls-link-grid a {
    position: relative; min-height: 130px; padding: 24px;
    border: 1px solid rgba(219,184,76,.30); border-radius: 17px;
    color: #fff; text-decoration: none; background: rgba(20,23,37,.74); transition: .25s ease;
}
.ls-link-grid a:hover { transform: translateY(-4px); border-color: #70f59a; }
.ls-link-grid strong, .ls-link-grid small { display: block; }
.ls-link-grid strong { font-size: 19px; }
.ls-link-grid small { margin-top: 10px; color: #aeb2c2; line-height: 1.5; }
.ls-link-grid i { position: absolute; right: 20px; bottom: 17px; color: #d9b74c; font-size: 22px; }

.ls-download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ls-download-card {
    padding: 32px; border: 1px solid rgba(219,184,76,.40); border-radius: 20px;
    background: linear-gradient(145deg, rgba(28,25,50,.92), rgba(8,10,17,.95));
}
.ls-download-card > span { color: #72f29b; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.ls-download-card h2 { margin: 16px 0 12px; color: #fff; font-size: 28px; }
.ls-download-card p { min-height: 76px; color: #aeb2c2; line-height: 1.6; }
.ls-download-card a {
    display: flex; min-height: 48px; margin-top: 22px; align-items: center; justify-content: center;
    border-radius: 12px; color: #08110b; text-decoration: none; font-weight: 900;
    background: linear-gradient(135deg, #d8b84d, #72f29b);
}
.ls-download-note { margin-top: 20px; padding: 24px; border-left: 4px solid #72f29b; background: rgba(8,10,17,.84); color: #c6c8d1; }
.ls-download-note strong { color: #fff; }

@media (max-width: 900px) {
    .ls-area { padding: 85px 14px 65px; background-attachment: scroll; }
    .ls-hero, .ls-page-header { padding: 30px; }
    .ls-feature-grid, .ls-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-download-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .ls-section, .ls-page-header { padding: 24px 18px; }
    .ls-feature-grid, .ls-link-grid { grid-template-columns: 1fr; }
    .ls-section__heading--row { display: block; }
    .ls-text-link { display: inline-block; margin-top: 15px; }
    .ls-pvp-table { overflow-x: auto; }
    .ls-pvp-table__head, .ls-pvp-table__row { min-width: 650px; }
}