@charset "utf-8";

/*
 * BUILD 서브페이지 전체 스타일
 * ---------------------------------------------------------
 * 적용 페이지: build_subpage/build_subpage.html
 *
 * 담당 영역:
 * 1. 상단 네비게이션과 MPH HERO BUILD 히어로 영역
 * 2. 맵 모드 필터 버튼과 PERKS 토글 버튼
 * 3. 영웅 특전 브라우저, 역할 탭, 영웅 선택 목록
 * 4. 맵 카드 그리드와 맵 선택 상태
 * 5. 맵 상세 전체 화면 패널
 * 6. 추천 영웅 카드, 특전 카드, 추천 조합 이미지
 * 6. 추천 영웅 카드, 특전 카드, 추천 조합 이미지
 * 7. 보라색 BUILD 테마와 모바일 반응형
 *
 * 등장/상세 패널 애니메이션 keyframes는 build_subpage/css/animations.css에 있습니다.
 */

/*
 * MPH BUILD 서브페이지 스타일
 * - 상단 네비게이션과 BUILD 히어로
 * - 전장 모드 필터와 맵 카드 그리드
 * - 영웅 특전 선택 브라우저
 * - 맵 추천 조합 상세 패널
 * - 보라색 BUILD 테마와 반응형 레이아웃
 */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
:root{
    --point:#ff9d00;
}
body{
    background-color: #000;
    font-family: "Zen Dots", sans-serif;
    overflow-x:hidden;
}

html{
    overflow-x:hidden;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

a{
    color:inherit;
    text-decoration:none;
}

.sub_nav{
    position:absolute;
    top:0;
    left:0;
    z-index:30;
    width:100%;
    padding:28px 4%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sub_logo,
.sub_home{
    color:#fff;
    font-weight:900;
    letter-spacing:2px;
}

.sub_logo{
    font-size:1.5rem;
}

.sub_home{
    padding:10px 18px;
    border:1px solid var(--point);
    border-radius:30px;
    transition:.25s;
}

.sub_home:hover{
    color:#000;
    background:var(--point);
}

.container{
    width:1400px;
    max-width:95%;
    margin:0 auto;
}
/* HERO */

#sub_visual{
    position:relative;
    height:730px;
    background:url("../assets/backgrounds/maps_bg.png") center / cover no-repeat;
}

#sub_visual .overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.3),
        rgba(0,0,0,.75)
    );
    box-sizing: border-box;
}

.sub_visual_inner{
    position:relative;
    z-index:10;

    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.sub_visual_inner span{
    color:var(--point);
    letter-spacing:3px;
    font-weight: bold;
}

.sub_visual_inner h2{
    font-size:clamp(72px, 8vw, 118px);
    color:#fff;
    margin:15px 0;
}

.sub_visual_inner h2 a{
    transition:color .25s;
}

.sub_visual_inner h2 a:hover{
    color:var(--point);
    text-shadow:0 0 30px rgba(148,82,255,.48);
}

.subpage_triangle{
    width:0;
    height:0;
    margin:24px 0 0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:14px solid var(--point);
    filter:drop-shadow(0 0 8px var(--point));
    animation:subpageTriangleBlink 1.3s ease-in-out infinite;
}

.sub_visual_inner p{
    color:#bbb;
    font-weight: bold;
}

/* FILTER */

#map_filter{
    margin-top: -70px;
    position:relative;
    z-index:20;
}

#map_filter .container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.sr_only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.map_search{
    flex:1 0 100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:3px;
}

.map_search[hidden]{
    display:none;
}

.map_search_field{
    display:flex;
    align-items:center;
    width:min(100%, 620px);
    min-height:52px;
    padding:0 16px;
    border:1px solid rgba(148,82,255,.78);
    border-radius:50px;
    background:rgba(8,8,10,.78);
    backdrop-filter:blur(20px);
    box-shadow:0 10px 35px rgba(0,0,0,.28);
    transition:border-color .25s, box-shadow .25s, background .25s;
}

.map_search_field:focus-within{
    border-color:var(--point);
    background:rgba(15,15,18,.94);
    box-shadow:0 0 0 3px rgba(148,82,255,.18), 0 14px 38px rgba(0,0,0,.35);
}

.map_search_field svg{
    flex:0 0 20px;
    width:20px;
    height:20px;
    margin-right:11px;
    fill:none;
    stroke:var(--point);
    stroke-width:2;
    stroke-linecap:round;
}

.map_search_field input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    color:#fff;
    background:transparent;
    font-size:.82rem;
    letter-spacing:.08em;
}

.map_search_field input::placeholder{
    color:#777;
    opacity:1;
}

.map_search_field input::-webkit-search-cancel-button{
    display:none;
}

.map_search_clear{
    flex:0 0 32px;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    color:#aaa;
    background:rgba(255,255,255,.08);
    font:400 24px/1 Arial, sans-serif;
    cursor:pointer;
}

.map_search_clear:hover{
    color:#111;
    background:var(--point);
}

.map_search_status{
    min-height:18px;
    margin-top:9px;
    color:#999;
    font-size:.7rem;
    letter-spacing:.04em;
}

.map_search_status.is_empty{
    color:var(--point);
}

.map_card.active_map .map_info > span,
#map_list .map_card.map_cf_active .map_info > span{
    display:inline-block;
    padding:5px 9px;
    border:1px solid rgba(204,180,255,.7);
    border-radius:6px;
    color:#f0e8ff;
    background:rgba(79,35,150,.88);
    box-shadow:0 3px 12px rgba(24,8,50,.35);
    letter-spacing:.06em;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.map_card.active_map .map_city,
#map_list .map_card.map_cf_active .map_city{
    color:#fff;
    font-weight:900;
    text-shadow:0 2px 5px rgba(0,0,0,.9);
}

.map_card.active_map .map_country,
#map_list .map_card.map_cf_active .map_country{
    color:#e4d7ff;
    font-weight:800;
    text-shadow:0 2px 5px rgba(0,0,0,.9);
}

.filter_btn{
    padding:15px 30px;

    border:none;
    cursor:pointer;

    color:#ffffff;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border:1px solid var(--point);

    transition:.3s;
}

.filter_btn:hover,
.filter_btn.active,
.perks_toggle:hover,
.perks_toggle.active{
    background:var(--point);
}

.perks_toggle{
    padding:15px 30px;

    border:1px solid #00d9ff;
    border-radius:50px;

    color:#fff;
    background:rgba(0,217,255,.08);

    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.perks_toggle:hover,
.perks_toggle.active{
    color:#071217;
    border-color:#00d9ff;
    background:#00d9ff;
}

/* PERKS BROWSER */

#perks_browser{
    display:none;
    padding:70px 0 100px;
}

#perks_browser.open{
    display:block;
}

.perks_browser_head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;

    margin-bottom:35px;
}

.perks_browser_head > div:first-child > span{
    color:var(--point);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.18em;
}

.perks_browser_head h2{
    margin:8px 0 10px;
    color:#fff;
    font-size:2.8rem;
}

.perks_browser_head p{
    color:#999;
}

.perk_role_tabs{
    display:flex;
    gap:10px;
}

.perk_search{
    flex:0 1 360px;
}

.perk_search_field{
    display:flex;
    align-items:center;
    width:100%;
    min-height:46px;
    padding:0 13px;
    border:1px solid rgba(0,217,255,.48);
    border-radius:50px;
    background:rgba(7,18,23,.7);
    transition:border-color .25s, box-shadow .25s;
}

.perk_search_field:focus-within{
    border-color:#00d9ff;
    box-shadow:0 0 0 3px rgba(0,217,255,.12);
}

.perk_search_field svg{
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin-right:10px;
    fill:none;
    stroke:#00d9ff;
    stroke-width:2;
    stroke-linecap:round;
}

.perk_search_field input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    color:#fff;
    background:transparent;
    font-size:.76rem;
    letter-spacing:.06em;
}

.perk_search_field input::placeholder{
    color:#66777d;
    opacity:1;
}

.perk_search_field input::-webkit-search-cancel-button{
    display:none;
}

.perk_search_clear{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    color:#9eacb1;
    background:rgba(255,255,255,.08);
    font:400 21px/1 Arial, sans-serif;
    cursor:pointer;
}

.perk_search_clear:hover{
    color:#071217;
    background:#00d9ff;
}

.perk_search_status{
    min-height:15px;
    margin:6px 12px 0;
    color:#718188;
    font-size:.64rem;
    text-align:right;
}

.perk_search_status.is_empty{
    color:#00d9ff;
}

.perk_role_btn{
    min-width:90px;
    padding:13px 20px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;

    color:#bbb;
    background:rgba(255,255,255,.05);

    font-weight:800;
    cursor:pointer;
    transition:.25s;
}

.perk_role_btn:hover,
.perk_role_btn.active{
    color:#111;
    border-color:var(--point);
    background:var(--point);
}

.perks_browser_body{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
}

.perk_hero_list{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:10px;
}

.perk_hero_btn{
    display:flex;
    align-items:center;
    gap:9px;

    width:100%;
    min-width:0;
    padding:9px 10px;

    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;

    color:#ddd;
    background:rgba(255,255,255,.04);

    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.perk_hero_btn:hover,
.perk_hero_btn.active{
    border-color:var(--point);
    background:rgba(255,157,0,.12);
    transform:translateY(-3px);
}

.perk_hero_portrait{
    position:relative;
    display:grid;
    place-items:center;
    flex:0 0 40px;

    width:40px;
    height:40px;
    overflow:hidden;

    border-radius:50%;
    background:linear-gradient(145deg, #343b4b, #151922);

    color:var(--point);
    font-size:.9rem;
    font-weight:900;
}

.perk_hero_portrait img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:contain;
}

.perk_hero_btn strong{
    display:block;
    overflow:hidden;

    font-size:.82rem;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.perk_hero_btn > span:last-child{
    min-width:0;
}

.perk_hero_btn small{
    display:block;
    overflow:hidden;
    margin-top:3px;

    color:#777;
    font-size:.68rem;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.perk_hero_detail{
    width:100%;
    min-height:420px;
    padding:30px;

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    background:rgba(255,255,255,.04);
}

.perk_detail_head{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.perk_detail_head .perk_hero_portrait{
    flex-basis:80px;
    width:80px;
    height:80px;
    font-size:1.5rem;
}

.perk_detail_head > div > span{
    color:var(--point);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
}

.perk_detail_head h3{
    margin-top:6px;
    color:#fff;
    font-size:2rem;
}

.perk_hero_english{
    margin-top:4px;
    color:#777;
    font-size:.9rem;
}

.perk_detail_grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
}

.perk_detail_grid .perk_section + .perk_section{
    margin-top:0;
}

.perk_detail_grid .perk_section{
    display:flex;
    flex-direction:column;
}

.perk_detail_grid .perk_list_box{
    flex:1;
}

.perk_empty{
    display:grid;
    place-items:center;
    min-height:260px;
    padding:30px;

    border:1px dashed rgba(255,255,255,.18);
    border-radius:14px;

    color:#999;
    text-align:center;
    line-height:1.7;
}

/* MAP LIST */

#map_list{
    padding:55px 0;
}
#map_list .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.map_category{
    grid-column:1 / -1;

    display:flex;
    align-items:center;
    gap:12px;

    margin-top:18px;
    padding:0 4px 12px;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.map_category:first-child{
    margin-top:0;
}

.map_category strong{
    color:var(--point);
    font-size:.9rem;
    letter-spacing:.14em;
}

.map_category span{
    color:#777;
    font-size:.82rem;
    font-weight:700;
}

.map_card{
    overflow:hidden;
    border-radius:20px;
    text-decoration:none;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);

    transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease;
    opacity:1;
    transform:scale(1);
}

.map_card.hide{
    opacity:0;
    transform:scale(.96);
    pointer-events:none;
}
.map_card:hover{
    transform:scale(1);
    box-shadow:none;
}

.map_card.active_map{
    opacity:1;
}

.map_card.selected{

    border:2px solid var(--point);

    box-shadow:
    0 0 0 1px rgba(255,157,0,.4),
    0 20px 60px rgba(255,157,0,.35);

}
.map_thumb{
    height:240px;
}

.map_thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.map_info{
    position:relative;
    z-index:2;
    margin-top:-22px;
    padding:25px;
    overflow:hidden;
    border-radius:18px 18px 0 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 45%),
        rgba(19,12,34,.7);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 -12px 32px rgba(5,2,12,.28);
    transition:background .35s ease, box-shadow .35s ease;
}

.map_info::before{
    content:"";
    position:absolute;
    top:0;
    left:12%;
    width:48%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    pointer-events:none;
}

.map_info span{
    color:var(--point);
    font-size:14px;
}

.map_info h3{
    margin:10px 0;
    color:#fff;
    font-size:1.12rem;
    letter-spacing:.02em;
    text-shadow:0 2px 8px rgba(0,0,0,.72);
}

.map_info p{
    min-height:48px;
    margin:0;
}

.map_info p .map_city,
.map_info p .map_country{
    display:block;
}

.map_info p .map_city{
    color:#fff;
    font-size:14px;
    line-height:1.45;
}

.map_info p .map_country{
    margin-top:6px;
    color:#aaa;
    font-size:12px;
    letter-spacing:1px;
}

.map_card.active_map .map_info,
#map_list .map_card.map_cf_active .map_info{
    background:
        linear-gradient(135deg, rgba(184,145,255,.17), rgba(255,255,255,.025) 48%),
        rgba(18,10,34,.76);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 -12px 34px rgba(31,9,67,.38);
}

/* DETAIL FULL SCREEN */

body.detail_open{
    overflow:hidden;
}

#map_detail{
    position:fixed;
    inset:0;
    z-index:9999;

    pointer-events:none;
    background:rgba(1,9,22,0);
    transition:background-color .45s ease;
}

#map_detail.open{
    pointer-events:auto;
    background:rgba(1,9,22,.52);
}

.detail_panel{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    padding:70px 80px;

    background:
    linear-gradient(
        120deg,
        rgba(5,7,12,.98),
        rgba(15,18,28,.96)
    );

    backdrop-filter:blur(25px);

    overflow-y:auto;

    transform:translateX(-100%);
    opacity:.84;
    transition:
        transform .52s cubic-bezier(.22,1,.36,1),
        opacity .42s ease;

    box-shadow:
    30px 0 100px rgba(0,0,0,.7);
}

#map_detail.open .detail_panel{
    transform:translateX(0);
    opacity:1;
}

#map_detail .detail_close{
    position:fixed;
    top:35px;
    right:45px;

    width:54px;
    height:54px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.08);
    color:#fff;

    font-size:40px;
    line-height:54px;

    cursor:pointer;
    z-index:10001;
    opacity:0;
    pointer-events:none;

    transition:opacity .25s ease, background-color .3s, color .3s, transform .3s;
}

#map_detail.open .detail_close{
    opacity:1;
    pointer-events:auto;
}

#map_detail .detail_close:hover{
    background:var(--point);
    color:#000;
}

.detail_content{
    width:100%;
    min-height:100%;
}

/* 상세 상단 레이아웃 */

.detail_inner{
    width:1400px;
    max-width:95%;
    margin:0 auto;
}

.detail_banner{
    width:1400px;
    max-width:95%;
    margin:0 auto 50px;
    overflow:hidden;
    border-radius:35px;
}

.detail_banner img{
    width:100%;
    height:48vh;
    object-fit:cover;
    display:block;

    border-radius:35px;
}

.detail_title span{
    color:var(--point);
    font-weight:bold;
    letter-spacing:3px;
}

.detail_title h2{
    font-size:5rem;
    color:#fff;
    margin-top:10px;
}

.detail_desc{
    margin:30px 0 80px;
}

.detail_desc p{
    color:#aaa;
    line-height:1.8;
    font-size:1.05rem;
}

/* HERO BUILD */

.hero_build h3,
.team_comp h3{
    color:#fff;
    margin-bottom:30px;
}

.hero_grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

    margin-bottom:100px;
}

.hero_role_title{
    grid-column:1 / -1;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    border-left:4px solid currentColor;
    background:rgba(255,255,255,.04);
    border-radius:0 12px 12px 0;

    font-size:1rem;
    font-weight:700;
}

.hero_role_title strong{
    color:#fff;
    font-size:.8rem;
    letter-spacing:.08em;
}

.hero_role_title.tank{
    color:#8fc0ff;
}

.hero_role_title.dps{
    color:#ff919b;
}

.hero_role_title.support{
    color:#83e6aa;
}

.hero_card{
    position:relative;
    padding:30px;

    text-align:center;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:20px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;
}

.hero_rank{
    position:absolute;
    top:16px;
    left:16px;

    padding:6px 10px;

    color:#111;
    background:var(--point);

    border-radius:999px;

    font-size:.75rem;
    font-weight:800;
}

.hero_card > img{
    width:120px;
    height:120px;
    object-fit:contain;
    transition:transform .35s ease, filter .35s ease;
}

.hero_card h4{
    color:#fff;
    margin-top:15px;
}

.hero_card .role{
    display:inline-block;
    margin-top:8px;
    padding:6px 12px;

    color:#fff;
    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

.hero_card .role.tank{
    background:rgba(61, 142, 255, .2);
    border-color:rgba(61, 142, 255, .55);
    color:#8fc0ff;
}

.hero_card .role.dps{
    background:rgba(255, 75, 90, .2);
    border-color:rgba(255, 75, 90, .55);
    color:#ff919b;
}

.hero_card .role.support{
    background:rgba(67, 207, 125, .2);
    border-color:rgba(67, 207, 125, .55);
    color:#83e6aa;
}

/* TEAM COMP */

.comp_grid{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    width:100%;
}

.comp_card{
    position:relative;
    width:100%;
    min-height:0;
    aspect-ratio:1672 / 941;
    overflow:hidden;

    border-radius:20px;

    background:#050810;
    border:1px solid rgba(255,255,255,.1);

    transition:
        transform .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

.comp_image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center top;
    transition:transform .45s ease, filter .45s ease;
}

.comp_overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:48px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 16, .05) 20%,
            rgba(5, 8, 16, .9) 100%
        );
}

.comp_overlay > span{
    margin-bottom:10px;

    color:var(--point);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.12em;
}

.comp_card h4{
    color:var(--point);
    margin-bottom:12px;
    font-size:1.8rem;
}

.comp_card p{
    color:#fff;
    font-size:1.05rem;
    font-weight:600;
    line-height:1.6;
    text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* HERO PERKS CARD UI */

.perk_wrap{
    width:100%;
    margin-top:24px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.1);

    text-align:left;
}

.perk_section + .perk_section{
    margin-top:28px;
}

.perk_section h5{
    position:relative;

    margin-bottom:16px;

    color:#00d9ff;
    font-size:.9rem;
    font-weight:800;
    text-align:center;
}

.perk_section h5::before,
.perk_section h5::after{
    content:"";
    position:absolute;
    top:50%;

    width:36%;
    height:1px;

    background:rgba(0,217,255,.5);
}

.perk_section h5::before{
    left:0;
}

.perk_section h5::after{
    right:0;
}

.major_section h5{
    color:var(--point);
}

.major_section h5::before,
.major_section h5::after{
    background:rgba(255,157,0,.55);
}

.perk_list_box{
    display:grid;
    grid-template-rows:repeat(2, minmax(190px, 1fr));
    gap:14px;
}

.perk_card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;

    padding:18px 18px 16px;

    border-radius:8px;

    background:rgba(15,29,45,.95);
    border:1px solid rgba(0,217,255,.45);

    box-shadow:
    inset 0 0 20px rgba(0,217,255,.04);

    transition:.3s;
}

.perk_card.major{
    background:rgba(36,24,16,.95);
    border:1px solid rgba(255,157,0,.45);

    box-shadow:
    inset 0 0 20px rgba(255,157,0,.04);
}

.perk_card.community{
    min-height:190px;

    border:1px solid rgba(0,217,255,.45);
    background:rgba(15,29,45,.95);

    box-shadow:
    inset 0 0 20px rgba(0,217,255,.04);
}

.perk_card.major.community{
    border:1px solid rgba(255,157,0,.45);
    background:rgba(36,24,16,.95);

    box-shadow:
    inset 0 0 20px rgba(255,157,0,.04);
}

.perk_badge{
    display:inline-block;

    margin-bottom:16px;
    padding:7px 16px;

    border-radius:30px;

    color:#071217;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.08em;

    border:1px solid #7af3ff;
    background:#00e5ff;

    box-shadow:0 0 16px rgba(0,229,255,.55);
}

.perk_card.major .perk_badge{
    color:#241300;

    border:1px solid #ffd18a;
    background:var(--point);

    box-shadow:0 0 16px rgba(255,157,0,.55);
}

.perk_head{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    width:100%;
}

.perk_left{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;

    min-width:0;
    text-align:center;
}

.perk_icon_frame{
    position:relative;
    isolation:isolate;

    display:grid;
    place-items:center;
    flex:0 0 64px;

    width:64px;
    height:64px;
    overflow:hidden;

    border:2px solid #00d9ff;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(0,217,255,.15), transparent 65%),
        #111b27;

    box-shadow:
        0 0 0 4px rgba(0,217,255,.1),
        0 0 18px rgba(0,217,255,.22);
}

.perk_card.major .perk_icon_frame{
    border-color:var(--point);
    background:
        radial-gradient(circle, rgba(255,157,0,.16), transparent 65%),
        #241a12;

    box-shadow:
        0 0 0 4px rgba(255,157,0,.1),
        0 0 18px rgba(255,157,0,.22);
}

.perk_icon_placeholder{
    position:relative;
    z-index:1;

    color:rgba(0,217,255,.6);
    font-size:1.6rem;
    font-weight:300;
}

.perk_card.major .perk_icon_placeholder{
    color:rgba(255,157,0,.65);
}

.perk_icon{
    position:absolute;
    inset:6px;
    z-index:2;

    width:calc(100% - 12px);
    height:calc(100% - 12px);

    object-fit:contain;
    border-radius:50%;
    transition:transform .3s ease, filter .3s ease;
}

/* MAP DETAIL INTERACTION */

#map_detail.open .detail_banner{
    animation:detailBannerReveal .72s .08s cubic-bezier(.22,1,.36,1) backwards;
}

#map_detail.open .detail_banner img{
    animation:detailBannerZoom 1.15s .08s cubic-bezier(.22,1,.36,1) backwards;
}

#map_detail.open .detail_title{
    animation:detailFadeUp .62s .16s ease-out backwards;
}

#map_detail.open .detail_desc{
    animation:detailFadeUp .62s .23s ease-out backwards;
}

#map_detail.open .hero_build > h3{
    animation:detailFadeUp .6s .3s ease-out backwards;
}

#map_detail.open .hero_role_title{
    animation:detailFadeUp .55s calc(.34s + var(--reveal-delay, 0ms)) ease-out backwards;
}

#map_detail.open .hero_card{
    animation:detailFadeUp .58s calc(.38s + var(--reveal-delay, 0ms)) ease-out backwards;
}

#map_detail.open .team_comp > h3{
    animation:detailFadeUp .6s .48s ease-out backwards;
}

#map_detail.open .comp_card{
    animation:detailFadeUp .62s calc(.52s + var(--reveal-delay, 0ms)) ease-out backwards;
}

#map_detail .hero_card:hover{
    transform:translateY(-8px);
    border-color:rgba(255,157,0,.8);
    background:rgba(255,255,255,.11);
    box-shadow:0 18px 38px rgba(0,0,0,.34);
}

#map_detail .hero_card:hover > img{
    transform:scale(1.08);
    filter:drop-shadow(0 10px 14px rgba(255,157,0,.22));
}

#map_detail .perk_card:hover{
    transform:translateY(-4px);
    border:2px solid #00e5ff;
    background:
        linear-gradient(145deg, rgba(0,229,255,.16), rgba(15,29,45,.98) 55%);
    box-shadow:
        0 0 0 3px rgba(0,229,255,.08),
        0 0 28px rgba(0,217,255,.48),
        inset 0 0 35px rgba(0,217,255,.12);
}

#map_detail .perk_card.major:hover{
    border:2px solid var(--point);
    background:
        linear-gradient(145deg, rgba(255,157,0,.18), rgba(36,24,16,.98) 55%);
    box-shadow:
        0 0 0 3px rgba(255,157,0,.09),
        0 0 28px rgba(255,157,0,.5),
        inset 0 0 35px rgba(255,157,0,.13);
}

#map_detail .perk_card:hover .perk_icon{
    transform:scale(1.12) rotate(3deg);
    filter:drop-shadow(0 7px 10px rgba(49,196,255,.28));
}

#map_detail .comp_card:hover{
    transform:translateY(-7px);
    border-color:rgba(255,157,0,.78);
    box-shadow:0 20px 42px rgba(0,0,0,.36);
}

#map_detail .comp_card:hover > img{
    transform:scale(1.025);
    filter:brightness(1.06);
}

#map_detail .detail_close:hover{
    transform:rotate(90deg) scale(1.06);
}

@media (prefers-reduced-motion:reduce){
    #map_detail,
    #map_detail *,
    #map_detail *::before,
    #map_detail *::after{
        scroll-behavior:auto;
        animation-duration:.01ms;
        animation-delay:0ms;
        transition-duration:.01ms;
    }
}

.perk_left strong{
    color:#eafaff;
    font-size:.95rem;
    font-weight:800;
    line-height:1.3;

    white-space:normal;
    overflow-wrap:break-word;
    word-break:keep-all;
}

.perk_card.major .perk_left strong{
    color:#fff0dc;
}

.perk_head em{
    position:absolute;
    top:18px;
    right:18px;

    color:#00d9ff;
    font-size:1.15rem;
    font-weight:900;
    font-style:normal;
}

.perk_card.major .perk_head em{
    color:var(--point);
}

.perk_card p{
    margin-top:14px;

    color:#d4e0ec;
    font-size:.86rem;
    line-height:1.65;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:keep-all;
}

.perk_card.major p{
    color:#ead8c6;
}

@media (max-width:900px){
    #map_filter .container{
        flex-wrap:wrap;
    }

    .perks_browser_head{
        align-items:flex-start;
        flex-direction:column;
    }

    .perk_search{
        flex-basis:auto;
        width:100%;
    }

    .perks_browser_body{
        grid-template-columns:1fr;
    }

    .perk_hero_list{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    .perk_detail_grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){
    .perk_role_tabs{
        width:100%;
    }

    .perk_search_status{
        text-align:center;
    }

    .perk_role_btn{
        flex:1;
        min-width:0;
    }

    .perk_hero_list{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .perk_hero_detail{
        padding:20px;
    }
}
body {
    font-family: "Zen Dots", sans-serif;
}

/* MPH SUBPAGE THEME */
:root{
    --point:#9452ff;
}

body{
    background:#05040b;
    overflow-x:hidden;
}

#sub_visual .overlay{
    background:
        linear-gradient(to bottom, rgba(5,4,11,.25), rgba(5,4,11,.92)),
        linear-gradient(90deg, rgba(148,82,255,.12), transparent 55%);
}

.filter_btn{
    border-color:rgba(148,82,255,.65);
    background:rgba(18,10,35,.58);
    backdrop-filter:blur(14px);
}

.filter_btn:hover,
.filter_btn.active{
    color:#fff;
    background:#9452ff;
    box-shadow:0 0 24px rgba(148,82,255,.28);
}

.map_card,
.perk_hero_card,
.perk_panel,
.map_detail{
    border-radius:10px;
    border-color:rgba(190,158,255,.2);
    background:rgba(16,10,28,.7);
    box-shadow:0 18px 45px rgba(0,0,0,.25);
    backdrop-filter:blur(12px);
}

.map_card,
.map_card:hover,
.map_card.selected,
#map_list .map_card.map_cf_active{
    box-shadow:none;
}

@media (max-width:900px){
    #map_list{
        padding:44px 0 70px;
    }

    #map_list .container{
        position:relative;
        display:block;
        width:100%;
        max-width:100%;
        height:500px;
        overflow:hidden;
        perspective:1200px;
        touch-action:pan-y;
    }

    #map_list .map_category{
        display:none;
    }

    #map_list .map_card{
        position:absolute;
        top:32px;
        left:50%;
        z-index:1;
        width:min(76vw, 360px);
        opacity:0;
        pointer-events:none;
        transform:translateX(-50%) scale(.74);
        transform-origin:center;
        transition:
            opacity .34s ease,
            transform .42s cubic-bezier(.22,1,.36,1),
            box-shadow .34s ease,
            filter .34s ease;
        will-change:transform, opacity;
    }

    #map_list .map_card.map_cf_active{
        z-index:5;
        opacity:1;
        pointer-events:auto;
        filter:brightness(1.05);
        transform:translateX(-50%) translateZ(80px) rotateY(0deg) scale(1);
        box-shadow:none;
    }

    #map_list .map_card.map_cf_prev{
        z-index:4;
        opacity:.72;
        pointer-events:auto;
        filter:brightness(.78);
        transform:translateX(-50%) translateX(-46%) translateZ(-90px) rotateY(42deg) scale(.82);
    }

    #map_list .map_card.map_cf_next{
        z-index:4;
        opacity:.72;
        pointer-events:auto;
        filter:brightness(.78);
        transform:translateX(-50%) translateX(46%) translateZ(-90px) rotateY(-42deg) scale(.82);
    }

    #map_list .map_card.map_cf_far_prev{
        z-index:3;
        opacity:.34;
        transform:translateX(-50%) translateX(-76%) translateZ(-210px) rotateY(54deg) scale(.68);
    }

    #map_list .map_card.map_cf_far_next{
        z-index:3;
        opacity:.34;
        transform:translateX(-50%) translateX(76%) translateZ(-210px) rotateY(-54deg) scale(.68);
    }

    #map_list .map_card.map_cf_hidden{
        opacity:0;
        transform:translateX(-50%) translateZ(-260px) scale(.56);
    }

    #map_list .map_card.map_cf_active:hover{
        transform:translateX(-50%) translateZ(80px) rotateY(0deg) scale(1);
    }

    .perk_hero_list{
        position:relative;
        display:block;
        height:78px;
        overflow:visible;
        perspective:900px;
        touch-action:pan-y;
    }

    .perk_hero_btn{
        position:absolute;
        top:6px;
        left:50%;
        z-index:1;
        width:min(64vw, 280px);
        min-height:58px;
        padding:7px 9px;
        opacity:0;
        pointer-events:none;
        background:#171024;
        transform:translateX(-50%) scale(.7);
        transform-origin:center;
        transition:
            opacity .28s ease,
            transform .36s cubic-bezier(.22,1,.36,1),
            border-color .25s ease,
            background-color .25s ease,
            filter .25s ease;
        will-change:transform, opacity;
    }

    .perk_hero_btn.perk_cf_active{
        z-index:5;
        opacity:1;
        pointer-events:auto;
        filter:brightness(1.04);
        background:#211433;
        transform:translateX(-50%) translateZ(64px) rotateY(0deg) scale(1);
    }

    .perk_hero_btn.perk_cf_prev{
        z-index:4;
        opacity:1;
        pointer-events:auto;
        filter:brightness(.78);
        background:#130d20;
        transform:translateX(-50%) translateX(-38%) translateZ(-70px) rotateY(40deg) scale(.76);
    }

    .perk_hero_btn.perk_cf_next{
        z-index:4;
        opacity:1;
        pointer-events:auto;
        filter:brightness(.78);
        background:#130d20;
        transform:translateX(-50%) translateX(38%) translateZ(-70px) rotateY(-40deg) scale(.76);
    }

    .perk_hero_btn.perk_cf_far_prev{
        z-index:3;
        opacity:0;
        transform:translateX(-50%) translateX(-70%) translateZ(-150px) rotateY(52deg) scale(.64);
    }

    .perk_hero_btn.perk_cf_far_next{
        z-index:3;
        opacity:0;
        transform:translateX(-50%) translateX(70%) translateZ(-150px) rotateY(-52deg) scale(.64);
    }

    .perk_hero_btn.perk_cf_hidden{
        opacity:0;
        transform:translateX(-50%) translateZ(-180px) scale(.52);
    }

    .perk_hero_btn.perk_cf_active:hover,
    .perk_hero_btn.perk_cf_active.active{
        transform:translateX(-50%) translateZ(74px) scale(1.02);
    }

    .perk_hero_list .perk_hero_portrait{
        flex-basis:34px;
        width:34px;
        height:34px;
    }

    .perk_hero_list .perk_hero_btn strong{
        font-size:.74rem;
    }

    .perk_hero_list .perk_hero_btn small{
        font-size:.6rem;
    }
}

@media (max-width:900px){
    .detail_panel{
        padding:72px 20px 46px;
    }

    #map_detail .detail_close{
        top:18px;
        right:18px;
        width:44px;
        height:44px;
        font-size:32px;
        line-height:44px;
    }

    .detail_inner,
    .detail_banner{
        width:100%;
        max-width:100%;
    }

    .detail_banner{
        margin-bottom:32px;
        border-radius:18px;
    }

    .detail_banner img{
        height:34vh;
        min-height:220px;
        border-radius:18px;
    }

    .detail_title h2{
        font-size:clamp(2.2rem, 9vw, 4rem);
        line-height:1.05;
        overflow-wrap:anywhere;
    }

    .detail_desc{
        margin:22px 0 48px;
    }

    .detail_desc p{
        font-size:.95rem;
    }

    .hero_grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:64px;
    }

    .hero_card{
        padding:24px 18px;
    }

    .hero_card > img{
        width:96px;
        height:96px;
    }

    .perk_wrap{
        margin-top:20px;
    }

    .perk_detail_grid,
    .perk_list_box{
        grid-template-columns:1fr;
        grid-template-rows:none;
    }

    .perk_card,
    .perk_card.community{
        min-height:0;
        padding:16px 14px;
    }

    .perk_icon_frame{
        flex-basis:52px;
        width:52px;
        height:52px;
    }

    .perk_head em{
        top:14px;
        right:14px;
        font-size:1rem;
    }

    .perk_card p{
        font-size:.8rem;
    }

    .comp_grid{
        gap:20px;
    }

    .comp_card{
        aspect-ratio:auto;
        min-height:320px;
    }

    .comp_image{
        object-fit:cover;
    }

    .comp_overlay{
        padding:26px 20px;
    }

    .comp_card h4{
        font-size:1.35rem;
    }

    .comp_card p{
        font-size:.9rem;
    }
}

@media (max-width:560px){
    #map_list .container{
        height:440px;
    }

    #map_list .map_card{
        top:24px;
        width:82vw;
    }

    .map_thumb{
        height:210px;
    }

    .map_info{
        padding:20px;
    }

    .perk_hero_list{
        height:76px;
    }

    .perk_hero_btn{
        width:70vw;
    }

    .perk_hero_btn.perk_cf_prev{
        transform:translateX(-50%) translateX(-28%) translateZ(-70px) rotateY(36deg) scale(.76);
    }

    .perk_hero_btn.perk_cf_next{
        transform:translateX(-50%) translateX(28%) translateZ(-70px) rotateY(-36deg) scale(.76);
    }

    .detail_panel{
        padding:66px 14px 38px;
    }

    .detail_banner img{
        height:28vh;
        min-height:180px;
    }

    .detail_title span{
        font-size:.78rem;
        letter-spacing:2px;
    }

    .detail_desc p{
        font-size:.88rem;
    }

    .hero_build h3,
    .team_comp h3{
        margin-bottom:20px;
    }

    .hero_role_title{
        padding:12px 14px;
    }

    .hero_card{
        padding:22px 14px;
    }

    .perk_section h5::before,
    .perk_section h5::after{
        width:28%;
    }

    .perk_left strong{
        font-size:.86rem;
    }

    .comp_card{
        min-height:280px;
    }

    .comp_overlay{
        padding:22px 16px;
    }
}

/* TABLET */
@media (max-width:900px){
    html{
        -webkit-text-size-adjust:100%;
    }

    .map_search_field input,
    .perk_search_field input{
        font-size:16px;
    }

    .container{
        width:calc(100% - 40px);
        max-width:720px;
    }

    .sub_nav{
        padding:
            max(20px, env(safe-area-inset-top))
            max(22px, env(safe-area-inset-right))
            20px
            max(22px, env(safe-area-inset-left));
    }

    #sub_visual{
        height:clamp(580px, 72svh, 680px);
    }

    .sub_visual_inner{
        padding:90px 28px 110px;
    }

    .sub_visual_inner h2{
        max-width:720px;
        font-size:clamp(52px, 10vw, 78px);
        line-height:.98;
    }

    .sub_visual_inner p{
        max-width:560px;
        line-height:1.7;
    }

    #map_filter{
        margin-top:-54px;
    }

    #map_filter .container{
        gap:10px;
    }

    .map_search_field{
        width:min(100%, 540px);
    }

    .filter_btn,
    .perks_toggle{
        min-height:46px;
        padding:11px 18px;
        font-size:.78rem;
    }

    #perks_browser{
        padding:54px 0 72px;
    }

    .perks_browser_head h2{
        font-size:clamp(2rem, 7vw, 2.8rem);
    }

    .perk_hero_detail{
        min-height:0;
    }

    .detail_panel{
        height:100svh;
        height:100dvh;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    #map_detail .detail_close{
        top:max(18px, env(safe-area-inset-top));
        right:max(18px, env(safe-area-inset-right));
    }
}

/* MOBILE */
@media (max-width:560px){
    .container{
        width:calc(100% - 28px);
    }

    .sub_nav{
        gap:14px;
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            16px
            max(16px, env(safe-area-inset-left));
    }

    .sub_logo,
    .sub_home{
        flex:0 0 auto;
    }

    .sub_logo{
        font-size:1.1rem;
    }

    .sub_home{
        padding:8px 13px;
        font-size:.78rem;
    }

    #sub_visual{
        height:clamp(500px, 66svh, 570px);
        background-position:52% center;
    }

    .sub_visual_inner{
        padding:76px 18px 92px;
    }

    .sub_visual_inner > span{
        font-size:.72rem;
        letter-spacing:2px;
    }

    .sub_visual_inner h2{
        width:100%;
        max-width:100%;
        margin:12px 0;
        font-size:clamp(36px, 11.5vw, 50px);
        letter-spacing:-1px;
        line-height:1.02;
        overflow-wrap:anywhere;
    }

    .sub_visual_inner p{
        max-width:340px;
        font-size:.8rem;
        line-height:1.65;
    }

    .subpage_triangle{
        margin-top:16px;
        border-left-width:9px;
        border-right-width:9px;
        border-top-width:11px;
    }

    #map_filter{
        margin-top:-32px;
    }

    #map_filter .container{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }

    .map_search{
        grid-column:1 / -1;
        width:100%;
        margin-top:2px;
    }

    .map_search_field{
        width:100%;
        min-height:46px;
        padding:0 13px;
    }

    .map_search_status{
        margin-top:7px;
        font-size:.62rem;
        text-align:center;
    }

    .filter_btn,
    .perks_toggle{
        width:100%;
        min-height:42px;
        padding:9px 6px;
        font-size:.68rem;
    }

    #map_list{
        padding:30px 0 54px;
    }

    #map_list .container{
        height:400px;
    }

    #map_list .map_card{
        top:18px;
        width:min(84vw, 340px);
    }

    .map_thumb{
        height:185px;
    }

    .map_info{
        padding:16px;
    }

    .map_info h3{
        overflow-wrap:anywhere;
    }

    #perks_browser{
        padding:42px 0 56px;
    }

    .perks_browser_head{
        gap:20px;
        margin-bottom:26px;
    }

    .perks_browser_head h2{
        font-size:1.8rem;
    }

    .perks_browser_head p{
        font-size:.82rem;
        line-height:1.65;
    }

    .perk_role_tabs{
        gap:6px;
    }

    .perk_role_btn{
        min-height:42px;
        padding:9px 6px;
        font-size:.72rem;
    }

    .perk_hero_detail{
        padding:16px;
        border-radius:14px;
    }

    .perk_detail_head{
        gap:14px;
        margin-bottom:20px;
    }

    .perk_detail_head .perk_hero_portrait{
        flex-basis:64px;
        width:64px;
        height:64px;
    }

    .perk_detail_head h3{
        font-size:1.5rem;
    }

    .detail_panel{
        padding:
            max(64px, calc(env(safe-area-inset-top) + 54px))
            max(12px, env(safe-area-inset-right))
            max(32px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    #map_detail .detail_close{
        width:40px;
        height:40px;
        font-size:28px;
        line-height:40px;
    }

    .detail_banner{
        margin-bottom:24px;
        border-radius:14px;
    }

    .detail_banner img{
        height:clamp(180px, 28svh, 240px);
        min-height:0;
        border-radius:14px;
    }

    .detail_title h2{
        font-size:clamp(1.8rem, 10vw, 3rem);
    }

    .detail_desc{
        margin:18px 0 36px;
    }

    .hero_grid{
        margin-bottom:48px;
    }

    .perk_section h5::before,
    .perk_section h5::after{
        width:20%;
    }

    .comp_card{
        min-height:230px;
    }

    .comp_overlay{
        padding:18px 14px;
    }
}

@media (hover:none){
    .sub_home:hover,
    .filter_btn:hover,
    .perks_toggle:hover,
    .perk_role_btn:hover,
    .perk_hero_btn:hover{
        transform:none;
    }
}

/* TABLET LANDSCAPE */
@media (min-width:901px) and (max-width:1366px) and (max-height:1024px) and (orientation:landscape) and (hover:none){
    html{
        -webkit-text-size-adjust:100%;
    }

    .container{
        width:calc(100% - 48px);
        max-width:1240px;
    }

    .sub_nav{
        padding:
            max(18px, env(safe-area-inset-top))
            max(28px, env(safe-area-inset-right))
            18px
            max(28px, env(safe-area-inset-left));
    }

    #sub_visual{
        height:clamp(500px, 72svh, 620px);
    }

    .sub_visual_inner{
        padding:80px 32px 100px;
    }

    .sub_visual_inner h2{
        max-width:900px;
        font-size:clamp(58px, 7.4vw, 88px);
        line-height:1;
    }

    #map_filter{
        margin-top:-48px;
    }

    #map_filter .container{
        gap:9px;
    }

    .filter_btn,
    .perks_toggle{
        min-height:44px;
        padding:10px 16px;
        font-size:.72rem;
    }

    .map_search{
        margin-top:1px;
    }

    .map_search_field,
    .perk_search_field{
        min-height:46px;
    }

    .map_search_field input,
    .perk_search_field input{
        font-size:16px;
    }

    #map_list{
        padding:44px 0 66px;
    }

    #map_list .container{
        grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
        gap:24px 20px;
    }

    .map_thumb{
        height:200px;
    }

    .map_info{
        padding:19px;
    }

    .perks_browser_head{
        align-items:flex-start;
        gap:18px 24px;
    }

    .perks_browser_head > div:first-child{
        flex:1 0 100%;
    }

    .perk_role_tabs{
        flex:1 1 auto;
    }

    .perk_search{
        flex:1 1 340px;
        max-width:460px;
    }

    .perk_hero_list{
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:9px;
    }

    .perk_hero_btn{
        padding:8px;
    }

    .perk_hero_detail{
        padding:24px;
    }

    .detail_panel{
        padding:
            max(62px, calc(env(safe-area-inset-top) + 50px))
            max(28px, env(safe-area-inset-right))
            max(38px, env(safe-area-inset-bottom))
            max(28px, env(safe-area-inset-left));
    }

    .detail_banner img{
        height:clamp(260px, 42vh, 380px);
    }

    .hero_grid{
        gap:18px;
    }
}

@media (min-width:901px) and (hover:hover){
    #map_list .map_card:hover{
        z-index:3;
        transform:translateY(-9px) scale(1.025);
        box-shadow:
            0 22px 46px rgba(0,0,0,.48),
            0 0 30px rgba(148,82,255,.24);
    }

    #map_list .map_card:hover .map_thumb img{
        transform:scale(1.055);
        filter:brightness(1.08) saturate(1.08);
    }

    #map_list .map_card:hover .map_info{
        background:
            linear-gradient(135deg, rgba(193,158,255,.22), rgba(255,255,255,.04) 48%),
            rgba(22,12,41,.82);
    }

    #map_list .map_thumb img{
        transition:transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease;
    }
}