.medal-box{

position:fixed;

top:30px;

left:50%;

transform:translateX(-50%);

width:100px;

height:100px;

z-index:999;

pointer-events:none;

transition:transform .25s linear;

}

.medal-bg{

position:absolute;

inset:0;

border-radius:28px;

background:rgba(25,25,25,.35);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(14px);

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

box-shadow:

0 8px 25px rgba(0,0,0,.35),

0 0 15px rgba(255,140,0,.15);

}

.medal-icon{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:82px;

height:90px;

object-fit:contain;

z-index:2;

transition:.3s;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;

    font-family:Tahoma,sans-serif;

    width:100%;

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

    background:#000;

    color:#fff;

}

#background{

    position:fixed;

    top:0;

    right:0;

    width:100%;

    height:100%;

    background-image:url("../images/background.jpg");

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    z-index:-3;

}

#overlay{

    position:fixed;

    top:0;

    right:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);

    z-index:-2;

}

main{

    width:100%;

    padding:25px;

    padding-bottom:130px;

}

#hero{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

}

.hero-content{

    width:100%;

    max-width:900px;

    padding:25px;

    border-radius:28px;

    backdrop-filter:blur(18px);

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

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

}

#festivalBanner{

    width:100%;

    border-radius:20px;

    display:block;

}

#festivalTitle{

    margin-top:25px;

    font-size:2rem;

    text-align:center;

}

#festivalDescription{

    margin-top:18px;

    line-height:2;

    text-align:center;

    color:#ececec;

}

#announcement{

    margin-top:30px;

}

.announcement-box{

    width:100%;

    padding:22px;

    border-radius:24px;

    backdrop-filter:blur(18px);

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

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

}

.announcement-box h2{

    margin-bottom:15px;

}

#announcementText{

    line-height:2;

}

#news{

    margin-top:30px;

}

.news-box{

    width:100%;

    padding:22px;

    border-radius:24px;

    backdrop-filter:blur(18px);

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

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

}

.news-box h2{

    margin-bottom:20px;

}

#newsContainer{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.news-item{

    padding:18px;

    border-radius:18px;

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

    transition:.3s;

}

.news-item:hover{

    transform:translateY(-4px);

}

.popup{

    position:fixed;

    top:0;

    right:0;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:rgba(0,0,0,.55);

    z-index:999;

}

.hidden{

    display:none;

}

.popup-box{

    width:100%;

    max-width:550px;

    max-height:92vh;

    overflow-y:auto;

    border-radius:28px;

    padding:25px;

    backdrop-filter:blur(25px);

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

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

}

button{

    cursor:pointer;

    border:none;

    outline:none;

}

.primary-btn{

    width:100%;

    height:50px;

    border-radius:14px;

    margin-top:20px;

    font-size:16px;

    color:#fff;

    background:#ff7a00;

}

.text-btn{

    background:none;

    color:#ffae55;

    font-size:15px;

}

.input-group{

    margin-top:18px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

}

.input-group input{

    width:100%;

    height:50px;

    padding:0 15px;

    border-radius:14px;

    border:none;

    outline:none;

    color:#fff;

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

}

::-webkit-scrollbar{

    width:7px;

}

::-webkit-scrollbar-thumb{

    background:#ff7a00;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

#taskbar{

    position:fixed;

    right:50%;

    transform:translateX(50%);

    bottom:18px;

    width:95%;

    max-width:520px;

    height:82px;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    gap:5px;

    padding:10px;

    border-radius:50px;

    backdrop-filter:blur(25px);

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

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

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

    z-index:999;
}

.taskbar-item{

    width:64px;

    height:64px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    border:none;

    background:none;

    color:#ffffff;

    cursor:pointer;

    transition:.30s;

    border-radius:18px;

}

.taskbar-item:hover{

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

}

.taskbar-item.active{

    background:rgba(255,122,0,.22);

}

.taskbar-item img{

    width:24px;

    height:24px;

    object-fit:contain;

    pointer-events:none;

}

.taskbar-item span{

    font-size:11px;

    white-space:nowrap;

}

#loginBtn{

    display:flex;

}

#profileBtn{

    display:none;

}

#profileBtn.show{

    display:flex;

}

.popup-close{

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    font-size:24px;

    color:#fff;

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

    cursor:pointer;

    transition:.25s;

    margin-bottom:15px;

}

.popup-close:hover{

    background:rgba(255,122,0,.25);

}

.popup h2{

    margin-bottom:18px;

    text-align:center;

    font-size:26px;

}

.popup-description{

    text-align:center;

    color:#d9d9d9;

    margin-bottom:25px;

    line-height:1.8;

}

.popup-footer{

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.primary-btn{

    transition:.30s;

}

.primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 0 18px rgba(255,122,0,.40);

}

.text-btn{

    cursor:pointer;

}

.text-btn:hover{

    color:#ffffff;

}

.input-group input:focus{

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

    box-shadow:0 0 12px rgba(255,122,0,.25);

}

.profile-popup{

    max-width:560px;

}

.profile-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

#profileImage{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid rgba(255,255,255,.18);

    background:#ffffff15;

}

#profileFullName{

    margin-top:18px;

    font-size:28px;

    font-weight:700;

    text-align:center;

}

#profileUsername{

    margin-top:8px;

    color:#d5d5d5;

    font-size:15px;

}

.profile-card{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-top:20px;

}

.profile-item{

    padding:18px;

    border-radius:18px;

    text-align:center;

    backdrop-filter:blur(12px);

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

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

}

.profile-item span{

    display:block;

    color:#d4d4d4;

    font-size:14px;

}

.profile-item strong{

    display:block;

    margin-top:10px;

    font-size:22px;

}

.progress-section{

    margin-top:30px;

}

.progress-section h3{

    margin-bottom:15px;

}

.progress-bar{

    width:100%;

    height:18px;

    border-radius:50px;

    overflow:hidden;

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

}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:50px;

    background:#ff7a00;

    transition:.4s;

}

#profileProgressText{

    display:block;

    margin-top:10px;

    text-align:center;

    color:#e5e5e5;

}

.profile-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:30px;

}

.stat-box{

    padding:18px;

    text-align:center;

    border-radius:18px;

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

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

}

.stat-box span{

    display:block;

    color:#d9d9d9;

}

.stat-box strong{

    display:block;

    margin-top:10px;

    font-size:24px;

}

.profile-medals{

    margin-top:35px;

}

.profile-medals h3{

    margin-bottom:15px;

}

#medalsContainer{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));

    gap:15px;

}

.medal{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    transition:.3s;

}

.medal:hover{

    transform:translateY(-4px);

    background:rgba(255,122,0,.18);

}

.medal img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.stages-popup{

    max-width:700px;

}

#stagesContainer{

    width:100%;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

    gap:18px;

    margin-top:25px;

}

.stage-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:220px;

    padding:20px;

    border-radius:22px;

    cursor:pointer;

    transition:.30s;

    backdrop-filter:blur(15px);

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

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

}

.stage-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,122,0,.55);

    box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.stage-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.stage-number{

    padding:8px 16px;

    border-radius:25px;

    font-size:14px;

    font-weight:600;

    background:rgba(255,122,0,.18);

}

.stage-body{

    margin-top:25px;

}

.stage-body h3{

    font-size:22px;

    margin-bottom:12px;

}

.stage-body p{

    line-height:1.9;

    color:#dddddd;

}

.stage-footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.stage-xp{

    font-weight:bold;

    color:#ffb347;

}

.unlocked{

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

}

.completed{

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

}

.locked{

    opacity:.55;

    cursor:not-allowed;

}

.stage-lock{

    position:absolute;

    top:15px;

    left:15px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    background:rgba(0,0,0,.35);

}

#stagePage{

    width:100%;

    min-height:100vh;

    padding:25px;

}

.stage-page-container{

    width:100%;

    max-width:900px;

    margin:auto;

}

#backToStages{

    padding:12px 20px;

    border:none;

    border-radius:14px;

    color:#fff;

    background:#ff7a00;

    cursor:pointer;

    margin-bottom:25px;

}

#backToStages:hover{

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(255,122,0,.35);

}

#backToMissions{

    padding:12px 20px;

    border:none;

    border-radius:14px;

    color:#fff;

    background:#ff7a00;

    cursor:pointer;

    margin-bottom:25px;

    transition:.3s;

}

#backToMissions:hover{

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(255,122,0,.35);

}

#missionCompleteButton{

    width:100%;

    height:60px;

    margin-top:35px;

    border:none;

    border-radius:18px;

    background:#ff7a00;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

#missionCompleteButton:hover{

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(255,122,0,.35);

}

#stageImage{

    width:100%;

    border-radius:24px;

    margin-bottom:25px;

    display:block;

}

#stageTitle{

    font-size:34px;

    margin-bottom:20px;

}

#stageDescription{

    line-height:2;

    color:#e5e5e5;

    margin-bottom:30px;

}

#stageContent{

    display:flex;

    flex-direction:column;

    gap:20px;

}

#stageContent img{

    width:100%;

    border-radius:18px;

}

#stageContent video{

    width:100%;

    border-radius:18px;

}

#stageContent audio{

    width:100%;
}

#stageContent iframe{

    width:100%;

    height:500px;

    border:none;

    border-radius:18px;

}

#stageContent p{

    line-height:2;

}

#startExamButton{

    width:100%;

    height:60px;

    margin-top:35px;

    border:none;

    border-radius:18px;

    background:#ff7a00;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

#startExamButton:hover{

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(255,122,0,.35);

}

.missions-popup{

    max-width:700px;

}

#missionsContainer{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.mission-card{

    width:100%;

    padding:22px;

    border-radius:22px;

    backdrop-filter:blur(18px);

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

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

    transition:.3s;

}

.mission-card:hover{

    transform:translateY(-4px);

    border-color:rgba(255,122,0,.45);

}

.mission-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.mission-header h3{

    font-size:22px;

}

.mission-status{

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    background:rgba(0,255,120,.15);

    color:#6cff97;

}

.mission-status.finished{

    background:rgba(255,193,7,.18);

    color:#ffd54f;

}

.mission-status.locked{

    background:rgba(255,0,0,.15);

    color:#ff8a8a;

}

.mission-body{

    margin-bottom:20px;

}

.mission-body p{

    line-height:2;

    color:#dddddd;

}

.mission-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.mission-xp{

    font-size:18px;

    font-weight:bold;

    color:#ffb347;

}

.mission-button{

    min-width:130px;

    height:46px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:#ffffff;

    background:#ff7a00;

    transition:.3s;

}

.mission-button:hover{

    transform:translateY(-2px);

}

.mission-button:disabled{

    cursor:not-allowed;

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

    color:#bbbbbb;

}

.mission-progress{

    width:100%;

    height:12px;

    margin-top:18px;

    border-radius:20px;

    overflow:hidden;

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

}

.mission-progress-fill{

    width:0%;

    height:100%;

    background:#ff7a00;

    border-radius:20px;

}

.mission-time{

    margin-top:15px;

    font-size:13px;

    color:#cccccc;

}

.leaderboard-popup{

    max-width:750px;

}

.leaderboard-header{

    display:grid;

    grid-template-columns:70px 1fr 90px 100px;

    gap:10px;

    padding:16px 18px;

    margin-top:20px;

    margin-bottom:15px;

    border-radius:18px;

    font-weight:bold;

    text-align:center;

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

}

#leaderboardContainer{

    display:flex;

    flex-direction:column;

    gap:14px;

}

#leaderboardList{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:18px;

}

.leaderboard-item{

    display:grid;

    grid-template-columns:70px 1fr 90px 100px;

    align-items:center;

    gap:10px;

    padding:18px;

    border-radius:18px;

    transition:.30s;

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

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

}

.leaderboard-item:hover{

    transform:translateY(-3px);

    border-color:rgba(255,122,0,.45);

}

.leaderboard-rank,
.leaderboard-user,
.leaderboard-stage,
.leaderboard-xp{

    text-align:center;

}

.leaderboard-user{

    font-weight:bold;

}

.leaderboard-stage{

    color:#dddddd;

}

.leaderboard-xp{

    color:#ffb347;

    font-weight:bold;

}

.leaderboard-item:nth-child(1){

    border-color:#FFD700;

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

}

.leaderboard-item:nth-child(2){

    border-color:#C0C0C0;

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

}

.leaderboard-item:nth-child(3){

    border-color:#CD7F32;

    background:rgba(205,127,50,.08);

}

.leaderboard-item.mine{

    border-color:#ff7a00;

    background:rgba(255,122,0,.12);

}

.leaderboard-user{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.lb-avatar{

    width:30px;

    height:30px;

    border-radius:50%;

    object-fit:cover;

}

.leaderboard-top3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:20px;

}

.top3-card{

    text-align:center;

    padding:20px 14px;

    border-radius:20px;

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

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

    backdrop-filter:blur(15px);

    transition:.3s;

}

.top3-card:hover{

    transform:translateY(-5px);

}

.top3-card.mine{

    border-color:#ff7a00;

    background:rgba(255,122,0,.12);

}

.top3-medal{

    font-size:28px;

    display:block;

    margin-bottom:6px;

}

.top3-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:8px;

    border:2px solid rgba(255,122,0,.5);

}

.top3-name{

    font-weight:bold;

    font-size:14px;

}

.top3-rank-title{

    font-size:11px;

    color:#dddddd;

    margin:4px 0;

}

.top3-xp{

    color:#ffb347;

    font-weight:bold;

    font-size:13px;

}

.leaderboard-space{

    height:35px;

}

.leaderboard-space-small{

    height:18px;

}

.my-rank{

    width:92%;

    margin:auto;

    padding:18px;

    border-radius:18px;

    background:#2c2416;

    border:2px solid #ffb400;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:white;

    box-shadow:0 0 18px rgba(255,180,0,.25);

}

.my-rank-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.my-rank-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}

.my-rank-name{

    font-size:18px;

    font-weight:bold;

}

.my-rank-level{

    color:#bbbbbb;

    font-size:13px;

}

.my-rank-right{

    text-align:left;

}

.my-rank-position{

    color:#ffb400;

    font-size:28px;

    font-weight:bold;

}

.my-rank-xp{

    color:#ffcf66;

}

.my-rank-stage{

    color:#d8d8d8;

    margin-top:5px;

}

.current-user{

    border:2px solid #ff7a00;

}

.ai-popup{

    max-width:750px;

    height:88vh;

    display:flex;

    flex-direction:column;

}

.ai-header{

    display:flex;

    align-items:center;

    gap:15px;

    padding-bottom:18px;

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

}

.ai-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.ai-avatar img{

    width:34px;

    height:34px;

}

.ai-info{

    flex:1;

}

.ai-info h2{

    margin:0;

    font-size:22px;

    text-align:right;

}

#aiStatus{

    color:#62ff8b;

    font-size:14px;

}

.ai-messages{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:20px;

    padding-right:3px;

}

.ai-message{

    display:flex;

    justify-content:flex-start;

}

.ai-bubble{

    max-width:85%;

    padding:16px;

    border-radius:20px;

    line-height:2;

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

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

}

.user-message{

    display:flex;

    justify-content:flex-end;

}

.user-bubble{

    max-width:85%;

    padding:16px;

    border-radius:20px;

    line-height:2;

    color:#fff;

    background:#ff7a00;

}

.ai-input-box{

    display:flex;

    align-items:flex-end;

    gap:12px;

    margin-top:20px;

}

#aiInput{

    flex:1;

    min-height:55px;

    max-height:140px;

    resize:none;

    padding:14px;

    border:none;

    outline:none;

    border-radius:18px;

    color:#ffffff;

    font-family:inherit;

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

}

#sendAiMessage{

    width:90px;

    height:55px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#ffffff;

    font-size:15px;

    background:#ff7a00;

    transition:.30s;

}

#sendAiMessage:hover{

    transform:translateY(-2px);

    box-shadow:0 0 15px rgba(255,122,0,.35);

}

#sendAiMessage:active{

    transform:scale(.96);

}
.gameBox{

    width:100%;

    margin:20px 0;

    border-radius:20px;

    overflow:hidden;

    background:#111;

}

.gameFrame{

    width:100%;

    height:75vh;

    border:none;

    display:block;

}
.missionCard{

    background:#1b1b1b;

    border-radius:20px;

    overflow:hidden;

    margin:20px;

}

.missionImage{

    width:100%;

    display:block;

}

.missionBody{

    padding:20px;

}

.missionXP{

    color:#ff7a00;

    font-size:20px;

    margin:15px 0;

}

.missionCard button{

    width:100%;

}
.chat-message{

    max-width:85%;

    padding:14px;

    margin:10px;

    border-radius:18px;

}

.chat-message.user{

    background:#ff7a00;

    color:white;

    margin-right:auto;

}

.chat-message.ai{

    background:#2b2b2b;

    color:white;

    margin-left:auto;

}

.short-video-page {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.short-video-header{

    position:absolute;

    top:0;

    right:0;

    left:0;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(10,10,10,.65);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    z-index:20;

}

.short-video-header h2{

    margin:0;

    color:#fff;

    font-size:19px;

}

.short-video-header button{

    position:absolute;

    right:15px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

}

.short-videos-container{

    width:100%;

    height:100%;

    overflow-y:auto;

    scroll-snap-type:y mandatory;

    scrollbar-width:none;

}

.short-videos-container::-webkit-scrollbar{

    display:none;

}

.short-video-item{

    position:relative;

    width:100%;

    height:100vh;

    scroll-snap-align:start;

    background:#000;

    overflow:hidden;

}

.short-video-item video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.short-video-info{

    position:absolute;

    right:20px;

    left:80px;

    bottom:35px;

    z-index:5;

    color:#fff;

}

.short-video-info h3{

    margin:0 0 8px;

    font-size:20px;

}

.short-video-info p{

    margin:0;

    color:#ddd;

    line-height:1.7;

}

.short-video-actions{

    position:absolute;

    left:15px;

    bottom:90px;

    display:flex;

    flex-direction:column;

    gap:18px;

    z-index:10;

}

.short-video-action{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(20,20,20,.65);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:22px;

    cursor:pointer;

}

.short-video-action span{

    display:block;

    font-size:11px;

    margin-top:2px;

}

.add-short-video{

    position:fixed;

    right:22px;

    bottom:90px;

    width:62px;

    height:62px;

    border:none;

    border-radius:50%;

    background:#ff8a00;

    color:#fff;

    font-size:34px;

    line-height:62px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.45);

    z-index:6000;

    cursor:pointer;

}

.add-short-video:active{

    transform:scale(.92);

}

@media(max-width:600px){

    .short-video-info{

        right:15px;

        left:75px;

        bottom:25px;

    }

    .short-video-actions{

        left:10px;

        bottom:80px;

    }

    .add-short-video{

        right:15px;

        bottom:80px;

    }

}

.canvas-content{width:100%;overflow-x:hidden;}

.design-canvas-wrap{width:100%;position:relative;overflow:hidden;}

.design-canvas{background:transparent;}

.canvas-block{overflow:hidden;}
.canvas-block img,
.canvas-block video{width:100%;height:100%;object-fit:cover;border-radius:10px;}
.canvas-block audio{width:100%;margin-top:20px;}
.canvas-block iframe.game-frame{width:100%;height:100%;border:none;border-radius:10px;background:#000;}
.canvas-block h2{margin:0;}
.canvas-block p{margin:0;line-height:1.8;}
.canvas-block .canvas-btn{
    display:inline-block;padding:10px 22px;border-radius:10px;
    background:#ff7a00;color:#fff;text-decoration:none;
}
.canvas-block .pdf-link{
    display:inline-block;padding:10px 18px;border-radius:8px;
    background:#e74c3c;color:#fff;text-decoration:none;
}

.stage-card, .mission-card{position:relative;cursor:pointer;}

.stage-card.locked, .mission-card.locked{opacity:.5;filter:grayscale(1);cursor:not-allowed;}

.lock-badge{
    position:absolute;top:10px;left:10px;
    background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
    color:#fff;border:1px solid rgba(255,255,255,.15);
    padding:4px 11px;border-radius:20px;font-size:11px;
}

.done-badge{
    position:absolute;top:10px;right:10px;
    background:rgba(46,204,113,.25);backdrop-filter:blur(8px);
    color:#fff;border:1px solid rgba(46,204,113,.5);
    padding:4px 11px;border-radius:20px;font-size:11px;
}

.xp-badge{
    display:inline-block;margin-top:6px;
    background:rgba(255,122,0,.18);border:1px solid rgba(255,122,0,.5);
    color:#ff7a00;padding:3px 12px;border-radius:20px;font-size:12px;font-weight:bold;
}

.mission-comments{margin-top:30px;}
.mission-comments textarea{width:100%;min-height:70px;border-radius:10px;padding:10px;}
.comment-item{background:rgba(255,255,255,.06);padding:10px 14px;border-radius:10px;margin-bottom:8px;}
.comment-item.admin-reply{background:rgba(255,152,0,.18);border-right:3px solid #ff7a00;}

.profile-rank{margin-top:20px;}
.rank-current-box{display:flex;align-items:center;gap:12px;margin:10px 0;}
.rank-current-box .rank-icon{width:56px;height:56px;object-fit:contain;}
.rank-current-info strong{display:block;font-size:16px;}
.rank-current-info span{font-size:12px;opacity:.8;}
.rank-path-btn{margin-top:12px;padding:8px 16px;border-radius:10px;border:none;background:#ff7a00;color:#fff;cursor:pointer;}

.ranks-popup{max-width:640px;max-height:80vh;overflow-y:auto;}
.rank-step{padding:14px;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:12px;}
.rank-step.current{border:2px solid #ff7a00;}
.rank-step-header{display:flex;align-items:center;gap:10px;}
.rank-step-header img{width:44px;height:44px;object-fit:contain;}
.rank-motto{font-size:12px;opacity:.8;margin:0;}
.rank-narrative{font-size:13px;line-height:1.9;margin:10px 0;}
.rank-focus{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin-bottom:8px;}
.rank-focus li{background:rgba(255,255,255,.08);padding:3px 10px;border-radius:20px;font-size:11px;}
.rank-requirements{display:flex;gap:12px;font-size:11px;opacity:.75;flex-wrap:wrap;}

.hub-create-box{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px;border-radius:10px;background:rgba(255,255,255,.06);}
.hub-create-box input,.hub-create-box textarea{width:100%;border-radius:8px;padding:8px;}

.hub-item{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:10px;}
.hub-item.mine{border:2px solid #ff7a00;}
.hub-item h3{margin-bottom:4px;}
.hub-item p{font-size:13px;opacity:.85;margin-bottom:6px;}
.hub-meta{display:flex;gap:14px;font-size:11px;opacity:.7;margin-bottom:8px;}
.rank-path-btn.small{padding:5px 12px;font-size:12px;margin-top:0;}
.hubs-popup{max-width:520px;max-height:80vh;overflow-y:auto;}

.canvas-block.block-game{background:transparent;}

.play-game-btn{
    width:100%;height:100%;border:none;border-radius:14px;cursor:pointer;
    background:linear-gradient(135deg,#ff7a00,#ff5722);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;font-size:15px;font-weight:bold;
    box-shadow:0 4px 14px rgba(255,87,34,.35);
    transition:transform .15s;
}

.play-game-btn:hover{transform:scale(1.03);}

.play-game-btn .play-icon{font-size:30px;}

.game-page{
    position:fixed;inset:0;z-index:999;background:#000;
    display:flex;flex-direction:column;
}

.game-page.hidden{display:none;}

.game-page-bar{
    display:flex;align-items:center;gap:14px;padding:10px 16px;
    background:#111;color:#fff;
}

.game-page-bar #backFromGame{
    background:#ff7a00;border:none;color:#fff;padding:8px 16px;
    border-radius:8px;cursor:pointer;
}

.game-page iframe#gameFrame{
    flex:1;width:100%;border:none;background:#000;
}

.hub-chat-box{margin-top:16px;padding:12px;border-radius:10px;background:rgba(255,255,255,.05);}
.hub-chat-box h3{margin-bottom:8px;font-size:15px;}

.hub-chat-messages{
    max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
    padding:8px;margin-bottom:10px;background:rgba(0,0,0,.15);border-radius:8px;
}

.hub-chat-msg{max-width:80%;background:rgba(255,255,255,.08);padding:6px 10px;border-radius:10px;align-self:flex-start;}
.hub-chat-msg.mine{align-self:flex-end;background:rgba(255,152,0,.25);}
.hub-chat-msg .sender{display:block;font-size:10px;opacity:.7;margin-bottom:2px;}
.hub-chat-msg p{margin:0;font-size:13px;word-break:break-word;}

#hubChatForm{display:flex;gap:8px;}
#hubChatForm input{flex:1;border-radius:20px;padding:8px 14px;}
#hubChatForm button{border:none;background:#ff7a00;color:#fff;border-radius:20px;padding:8px 16px;cursor:pointer;}

.short-video-page{
    position:fixed;inset:0;z-index:900;background:#0f0f14;
    display:flex;flex-direction:column;color:#fff;
}

.short-video-page.hidden{display:none;}

.sv-topbar{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}

.sv-topbar #closeShortVideo{
    background:#ff7a00;border:none;color:#fff;padding:8px 16px;
    border-radius:8px;cursor:pointer;flex-shrink:0;
}

.channel-tabs{flex:1;display:flex;gap:8px;overflow-x:auto;padding:2px;}

.channel-tab{
    flex-shrink:0;background:rgba(255,255,255,.08);border:none;color:#fff;
    padding:7px 16px;border-radius:20px;cursor:pointer;font-size:13px;white-space:nowrap;
}

.channel-tab.active{background:#ff7a00;font-weight:bold;}

.sv-topbar-actions{display:flex;gap:8px;flex-shrink:0;}

.sv-icon-btn{
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    color:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px;
}

.sv-feed{
    flex:1;overflow-y:auto;padding:16px;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}

.sv-card{
    background:rgba(255,255,255,.05);border-radius:16px;overflow:hidden;
    display:flex;flex-direction:column;box-shadow:0 4px 16px rgba(0,0,0,.3);
}

.sv-media{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;}
.sv-media video, .sv-media img{width:100%;max-height:360px;object-fit:cover;display:block;}
.sv-media audio{width:100%;margin-top:6px;}

.sv-info{padding:10px 14px;}
.sv-channel{display:inline-block;background:#ff7a00;color:#fff;font-size:11px;padding:2px 10px;border-radius:20px;margin-bottom:6px;}
.sv-poster{display:block;font-size:11px;opacity:.7;margin-bottom:6px;}
.sv-caption{font-size:13px;line-height:1.8;margin:0;}

.sv-actions{display:flex;gap:8px;padding:0 14px 12px;}

.sv-react-btn{
    background:rgba(255,255,255,.08);border:none;color:#fff;padding:6px 12px;
    border-radius:20px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px;
}

.sv-react-btn.active{background:#ff7a00;}
.sv-delete-btn{margin-right:auto;background:rgba(231,76,60,.25);}

#createChannelPopup input,
#createChannelPopup textarea,
#createPostPopup input,
#createPostPopup textarea,
#createPostPopup select{
    width:100%;margin-bottom:12px;border-radius:8px;padding:9px;
}

.sv-file-label{display:block;font-size:12px;opacity:.8;margin-bottom:4px;}
.sv-media-field{margin-bottom:12px;}