*{box-sizing:border-box}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
body{touch-action:manipulation}
a:hover{text-decoration:none}
.hidden{display:none}
.blue-text{color:var(--orange)}
.h-vh-100{height:100dvh;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}
.index-container{height:100%;width:100%;overflow-y: auto;}
#index-section{display:flex;flex-direction:column;justify-content:space-between;scrollbar-width:none;-ms-overflow-style:none}
#index-section::-webkit-scrollbar{display:none}
.header-wrapper{flex:1;overflow:hidden}
.content-wrapper a{position:relative}
#wowTabs{position:sticky;top:0;background:#fff;border-bottom:1px solid #ddd;height:60px;font-weight:500;justify-content:flex-start;z-index:1;display:flex;align-items:center;gap:10px;padding:10px}
#nav-section{z-index:2}
#wowTabs .nav-item{flex:none}
#login-section,#signup-section{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.95);z-index:2000;display:none}
.view-login-container{display:flex;flex-direction:column;align-items:center;height:100%;background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.7)),url(/images/index/world-map-login.webp) center / cover no-repeat fixed;color:#fff}
.signup-toggle,#show-store-steps{color:var(--orange)}
.view-login-info{display:flex;flex-direction:column;gap:10px;height:100%;overflow:hidden}
.view-login-social{display:flex;flex-direction:column;align-items:center;gap:10px}
.view-login-header{display:flex;align-items:center;justify-content:space-between;flex:0}
.view-login-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.view-login-footer{flex:0;display:flex;justify-content:space-around;align-items:center;padding:10px}
.dropdown-signup{position:relative;text-align:center;display:inline-block}
.dropdown-toggle-signup{cursor:pointer;display:flex;justify-content:center;align-items:center;gap:5px}
.dropdown-content-signup{display:none;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;width:100%;left:50%;transform:translateX(-50%)}
.dropdown-content-signup a{color:black;text-decoration:none;display:block}
.dropdown-content-signup a:hover{background:var(--orange);}
.dropdown-content-signup-list{display:grid;grid-template-columns:repeat(2,1fr);justify-items:flex-start;gap:5px;padding:10px}
.dropdown-content-signup-list img{width:30px;aspect-ratio:1 / 1;object-fit:cover}
.alert-danger:empty{display:none}
.check-form{font-size:14px;display:flex;align-items:center;gap:5px}
.check-form a{color:var(--orange)}
.btn-back,.btn-cancel{font-size:20px;cursor:pointer}
.swal2-container{z-index:10000}
.swal2-container .swal2-html-container{padding:0}
.around-here-item{display:flex;align-items: center;gap:5px;padding:5px;border-bottom:1px solid #dee2e6}
.around-here-avatar img{width:40px;border-radius:50%}
.around-here-info{display:flex;flex-direction:column;flex:1}
.around-here-info-name-play{display:flex;justify-content:space-between;align-items:center;gap:5px}
.name-info{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;flex:1}
.name-info .user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: flex}
.name-info .gender-icon{width:16px;height:16px;flex-shrink:0}
.name-info .distance{flex-shrink:0;white-space:nowrap}
.chat-info,.play-info{border-radius:5px;padding:2px;font-size:12px}
.chat-info{border:1px solid #fd7e14;color:#fd7e14}
.play-info{border:1px solid #28a745;color:#28a745}
.play-button{display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.play-button img{width:18px;height:18px}
#refresh-nearby{cursor:pointer;display:flex;padding: 10px;justify-content:end}
#nearby-users-list{display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px;}
.refresh-nearby-info{padding:5px;background:#f8f9fa;border:1px solid #ccc;border-radius:5px;font-size:12px}
.wow-footer{text-align:left;padding:10px 10px 50px 10px;font-family:Roboto,sans-serif;width:100%}
.wow-footer-toggle{cursor:pointer;text-align:center}
.wow-footer-content{max-width:1200px;margin:0 auto;display:none}
.wow-footer-section{margin-bottom:15px;text-align:justify}
.wow-footer-section h3{font-size:16px;margin-bottom:10px}
.wow-footer-items{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
.wow-footer-items p{font-size:14px;flex:1 1 18%;margin:5px 0;text-align:left}
.wow-footer-items-center{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wow-footer-items-center p{font-size:14px;flex:1 1 100%;margin:5px 0;text-align:center}
.login-toggle{display:flex;align-items:center;gap:10px;cursor:pointer}
.g_id_signin{display:inline-block!important;visibility:visible!important;min-width: 262px;}
.login-toggle img{width:36px!important;height:36px!important;border:1px solid #ddd;border-radius:50%;box-shadow:rgba(0,0,0,0.15) 1.95px 1.95px 2.6px}
.tiktok-login-btn{background:#343a40;padding:10px;border:1px solid #ddd;border-radius:5px;display:flex;justify-content:space-between;align-items:center;height:40px}
.nsm7Bb-HzV7m-LgbsSe-MJoBVe{background:#dc3545!important}
.nsm7Bb-HzV7m-LgbsSe-Bz112c{background:#fff;padding:3px!important;border-radius:50%;width:26px!important;height:26px!important;margin:0}
.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb span{color:#fff}
.small-note{display:block;margin-top:5px}
.tiktok-login-btn img{width:25px;background:#fff;border-radius:50%}
.tiktok-login-btn span{width:100%;text-align:center;color:#fff;font-size:14px}
.custom-divider{display:flex;align-items:center;justify-content:center;gap:10px}
.divider-line{flex:1;height:2px;background-color:#ddd}
.divider-image{width:50px;height:auto;border:1px solid #ccc;border-radius:50%;padding:5px}
.dropdown{text-align:center;padding:10px}
.login-text{display:flex;justify-content:center;align-items:center}
.main-text-img{width:95%;height:auto}
.body-wrapper{display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px;row-gap:20px;padding:10px}
.game-card{position:relative;border-radius:15px 50px 10px 30px;color:white;height:70px;box-shadow:rgba(0,0,0,0.17) 0 -23px 25px 0 inset,rgba(0,0,0,0.15) 0 -36px 30px 0 inset,rgba(0,0,0,0.1) 0 -79px 40px 0 inset,rgba(0,0,0,0.06) 0 2px 1px,rgba(0,0,0,0.09) 0 4px 2px,rgba(0,0,0,0.09) 0 8px 4px,rgba(0,0,0,0.09) 0 16px 8px,rgba(0,0,0,0.09) 0 32px 16px}
.game-card-shop{background:#28a745;border:1px solid #25933e;outline:1px solid #25933e}
.game-card-me{background:#007bff;border:1px solid #1877f2;outline:1px solid #1877f2}
.game-card-team{background:#ff9800;border:1px solid #fd7e14;outline:1px solid #fd7e14}
.game-card-travel-heart{background:#9C27B0;border:1px solid #71286a;outline:1px solid #71286a}
.game-card-missions{background:#607D8B;border:1px solid #495057;outline:1px solid #495057}
.game-card-battle{background:#7066e0;border:1px solid #7165ef;outline:1px solid #7165ef}
.game-card-room-chat{background:#E91E63;border:1px solid #dc3545;outline:1px solid #dc3545}
.game-card h5{position:absolute;top:50%;left:0;transform:translate(0,-50%);font-size:16px;z-index:1;padding:10px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,0.6)}
.card-image{position:absolute;top:50%;right:0;transform:translate(0,-50%);width:70px}
.exchange-items,.team-items,.me-items{position:absolute;top:-5px;left:-3px;background:var(--danger);border-radius:10px 10px 10px 0;padding:5px;color:white;font-size:10px;font-weight:500;height:24px;display:flex;justify-content:center;align-items:center;box-shadow:rgba(0,0,0,0.35) 0 5px 15px;gap:5px}
.location-access{cursor:pointer;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.location-access span{background:#f8f9fa;margin:10px;padding:10px;border-radius:10px;font-size:12px}
.game-card .card-icon-personal,.game-card .card-icon-team,.game-card .card-icon-travel,.game-card .card-icon-mission,.game-card .card-icon-register-shop,.game-card .card-icon-tutorial,.game-card .card-icon-exchange-items{position:absolute;color:white;opacity:0.3;font-size:30px}
.card-icon-exchange-items.icon-exchange-items-1{top:15%;left:25%;transform:rotate(20deg)}
.card-icon-exchange-items.icon-exchange-items-2{top:55%;left:65%;transform:rotate(-15deg)}
.card-icon-exchange-items.icon-exchange-items-3{top:75%;left:35%;transform:rotate(10deg)}
.card-icon-personal.icon-personal-1{top:15%;left:25%;transform:rotate(20deg)}
.card-icon-personal.icon-personal-2{top:55%;left:65%;transform:rotate(-15deg)}
.card-icon-personal.icon-personal-3{top:75%;left:35%;transform:rotate(10deg)}
.card-icon-personal.icon-personal-4{top:35%;left:85%;transform:rotate(10deg)}
.card-icon-team.icon-team-1{top:25%;left:70%;transform:rotate(-20deg)}
.card-icon-team.icon-team-2{top:65%;left:20%;transform:rotate(25deg)}
.card-icon-team.icon-team-3{top:35%;left:50%;transform:rotate(-10deg)}
.card-icon-team.icon-team-4{top:45%;left:40%;transform:rotate(-40deg)}
.card-icon-travel.icon-travel-1{top:20%;left:30%;transform:rotate(15deg)}
.card-icon-travel.icon-travel-2{top:60%;left:75%;transform:rotate(-25deg)}
.card-icon-travel.icon-travel-3{top:40%;left:45%;transform:rotate(5deg)}
.card-icon-mission.icon-mission-1{top:30%;left:65%;transform:rotate(-15deg)}
.card-icon-mission.icon-mission-2{top:70%;left:25%;transform:rotate(20deg)}
.card-icon-mission.icon-mission-3{top:50%;left:55%;transform:rotate(-5deg)}
.card-icon-register-shop.icon-register-shop-1{top:25%;left:70%;transform:rotate(-20deg)}
.card-icon-register-shop.icon-register-shop-2{top:65%;left:20%;transform:rotate(25deg)}
.card-icon-register-shop.icon-register-shop-3{top:35%;left:50%;transform:rotate(-10deg)}
.card-icon-tutorial.icon-tutorial-1{top:20%;left:30%;transform:rotate(15deg)}
.card-icon-tutorial.icon-tutorial-2{top:60%;left:75%;transform:rotate(-25deg)}
.card-icon-tutorial.icon-tutorial-3{top:40%;left:45%;transform:rotate(5deg)}
.clickable-card{cursor:pointer}
.login{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.avatar img{width:36px;height:36px;object-fit:cover;border-radius:50%}
.header-icons{display:flex;justify-content:space-between}
.header-icons .icon-item{display:flex;align-items:center;gap:5px;cursor:pointer}
.header-background{background-color:#f8f9fa;padding:5px;display:flex;gap:10px;align-items:center;font-size:14px;border-radius:50px}
.header-background i{color:#fd7e14}
.icon-item{display:flex;flex-direction:center;align-items:center;gap:5px}
.room-section{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:10px}
.room-title{display:flex;justify-content:space-between;align-items:center;height:50px}
.room-title h2{font-size:24px;color:#1a73e8;margin:0}
.room-title .badge{background-color:#fff;color:#000;padding:10px;border-radius:10px;border:1px solid #ddd}
.event,.medal{display:flex;flex-direction:column;justify-content:space-around;align-items:center;color:#000}
.event-count,.gift-count,.lucky-ticket-count{position:absolute;top:-7px;right:-3px;background:red;border-radius:50%;padding:5px;color:#fff;font-size:10px;width:25px;height:25px;display:flex;justify-content:center;align-items:center;font-weight:700;border:3px solid #fff}
.gift-count,.lucky-ticket-count{color:#fff!important}
.lucky-ticket-count{right:5px!important}
.mission-new{position:absolute;top:-25px;left:-10px;width:60px;height:auto}
.icon-item.medal span{font-size:10px}
.modal-dialog{height:100dvh!important}
.modal-header{display:flex;justify-content:space-between;align-items:center}
.modal-header span{font-weight:bold}
.modal-content {border-radius: 0 !important;}
#diaryBody{display:flex;flex-direction:column}
.gift-header{display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:10px;padding:10px}
.gift-header span{font-size:16px;font-weight:700}
.treasure-info{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gift-body{flex:1;position:relative;display:flex;justify-content:center;align-items:center}
.distance-all{display:flex;flex-direction:column;justify-content:space-around;align-items:center;font-size:14px}
.distance-all img{width:36px}
.distance-all span{font-size:14px;font-weight:400}
#treasureCanvas{max-width:100%;max-height:100%;aspect-ratio:1 / 1;display:block;margin:0 auto}
#canvas-overlay{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%}
.mission-help{text-align:center;cursor:pointer;margin-bottom:10px}
.journey-reward-container{display:grid;gap:10px;justify-content:center}
.journey-reward-box{background:var(--indigo);border:2px solid var(--yellow);text-align:center;border-radius:10px;cursor:pointer;transition:0.3s;position:relative}
.journey-reward-box:hover{transform:scale(1.1);border-color:#ff6600}
.journey-reward-box:nth-child(7){grid-column:span 3;grid-row:span 3;transform:scale(1);border:3px solid #ff4500;background:linear-gradient(to right,#6610f273,#6f42c1ba);justify-self:center;animation:glow 1s ease-in-out infinite}
.journey-reward-box.gift{animation:glow 1s ease-in-out infinite}
.journey-reward-box img{width:80px;height:80px;object-fit:contain;border-radius:inherit;transition:0.3s}
.journey-reward-box:nth-child(7) img{width:130px;height:130px;animation:glow 3s ease-in-out infinite}
.journey-reward-received{background:gray;border-color:gray;pointer-events:none}
.journey-reward-received img{filter:grayscale(100%);opacity:0.5}
.journey-reward-box .received-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#fd7e14}
.reward-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--warning);font-weight:bold;font-size:16px;pointer-events:none;z-index:2;width:max-content;animation:glowText 1s ease-in-out infinite}
.reward-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1;border-radius:inherit}
.journey-reward-grid{display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.journey-reward-item{background:white;padding:5px;border-radius:5px;text-align:center}
.journey-reward-item img{width:60px;height:60px;object-fit:contain}
.swal-gift-popup,.swal-pet-popup{background-size:cover;background-position:center;background-repeat:no-repeat;padding:20px;border-radius:10px;position:relative}
.swal-gift-popup{background-image:url(https://wownow.life/images/world_map.webp)}
.swal-pet-popup{background-image:url(https://wownow.life/images/vn_map.webp)}
.swal-gift-popup::before,.swal-pet-popup::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);border-radius:10px}
.swal-confirm-pet{position:absolute;bottom:10px;left:50%;transform:translateX(-50%)}
.swal-gift-image{position:absolute;bottom:0;right:0;max-width:35%;height:auto;z-index:-1}
.swal-pet-male-image{position:absolute;bottom:0;right:20px;max-width:47%;height:auto}
.swal-pet-female-image{position:absolute;bottom:0;right:-30px;max-width:50%;height:auto}
.swal-pet-wofl-image{position:absolute;bottom:0;right:50px;max-width:40%;height:auto;z-index:1}
.swal-pet-mavuong-image{position:absolute;bottom:0;left:-25px;max-width:60%;height:auto}
.swal-pet-taysai-image{position:absolute;bottom:0;left:50px;max-width:50%;height:auto}
.gift-text{color:#fff;font-weight:bold;text-shadow:2px 2px 5px rgba(0,0,0,0.7);font-size:30px;display:flex;align-items:center}
.selected-day{color:#fd7e14;font-size:70px;font-weight:bold;text-shadow:2px 2px 5px rgba(0,0,0,0.7)}
.selected-day-pet{color:#fd7e14;font-size:50px;font-weight:bold;text-shadow:2px 2px 5px rgba(0,0,0,0.7)}
.item-list-login{text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;padding:10px}
.item-list-pet{color:var(--white);font-weight:bold;text-shadow:2px 2px 5px var(--orange);position:absolute;bottom:70px;z-index:2}
.item-list-pet-1{color:var(--white);font-weight:bold;text-shadow:2px 2px 5px var(--orange);font-size:x-large}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-2px,0)}50%{transform:translate(2px,0)}75%{transform:translate(-2px,0)}100%{transform:translate(0,0)}}
@keyframes wave{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes glow{0%{box-shadow:0 0 5px yellow,0 0 10px yellow}100%{box-shadow:0 0 10px orange,0 0 15px orange}}
@keyframes glowText{0%{text-shadow:0 0 5px #ffff00,0 0 10px #ffcc00}50%{text-shadow:0 0 10px #ffcc00,0 0 20px #ff9900}100%{text-shadow:0 0 5px #ffff00,0 0 10px #ffcc00}}
@media (max-width:480px){.wow-footer-items p{flex:1 1 45%}.wow-footer-items-center p{flex:1 1 100%}}
@media (max-width:767px){.body-wrapper{grid-template-columns:repeat(2,1fr)}.wow-footer-items p{flex:1 1 30%}.wow-footer-items-center p{flex:1 1 100%}#nearby-users-list{grid-template-columns:repeat(1,1fr)}.view-login-info{width:90%}}
@media (min-width:768px){.view-login-info{width:40%}}
@media (min-width:1280px){#nearby-users-list{grid-template-columns:repeat(3,1fr)}}