/* ===== LAYOUT ===== */

.tb_home{
display:flex;
flex-direction:column;
}


/* ===== HERO ===== */

.tb_hero_stats{
position:absolute;
top:24px;
right:28px;
display:flex;
gap:14px;
z-index:6;
}

.tb_hero_stat{
display:flex;
align-items:center;
gap:10px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);
padding:10px 16px;
border-radius:12px;
font-weight:800;
font-size:16px;
color:#fff;
box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.tb_stat_icon{font-size:18px}
.tb_stat_value{font-size:18px}


/* ===== WORLD PROGRESS ===== */

.tb_world_meta{
margin-top:10px;
display:flex;
gap:18px;
font-size:14px;
color:rgb(var(--tb-color2));
}

.tb_world_coins{
color:rgb(var(--tb-color6));
font-weight:700;
}

.tb_world_progress{
margin-top:14px;
}

.tb_progress_bar{
height:6px;
background:rgb(var(--tb-color1)/.08);
border-radius:999px;
overflow:hidden;
}

.tb_progress_fill{
height:100%;
background:rgb(var(--tb-color6));
width:0;
transition:width .6s ease;
}

.tb_progress_label{
font-size:12px;
color:rgb(var(--tb-color2));
margin-top:6px;
display:inline-block;
}


/* ===== RAIL ===== */

.tb_level_rail_wrap{
padding:36px 40px 70px;
border-bottom:1px solid rgb(var(--tb-color1)/.08);
}

.tb_level_rail_container{
position:relative;
display:flex;
align-items:center;
}

.tb_level_rail{
display:flex;
gap:18px;
overflow-x:auto;
scroll-behavior:smooth;
padding-bottom:10px;
}

.tb_level_rail::-webkit-scrollbar{
display:none;
}


/* ===== ARROWS ===== */

.tb_rail_arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
border-radius:50%;
background:rgb(var(--tb-color3));
border:1px solid rgb(var(--tb-color1)/.08);
font-size:22px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:5;
}

.tb_rail_arrow.left{left:-12px}
.tb_rail_arrow.right{right:-12px}

.tb_level_arrow{
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:rgb(var(--tb-color2));
opacity:.6;
min-width:30px;
}

/* ===== LEVEL CARD ===== */

.tb_level_card{
min-width:260px;
width:260px;
height:165px;

background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
border:1px solid rgb(var(--tb-color1)/.08);
border-radius:28px;

padding:22px;

display:grid;
grid-template-rows:auto 1fr auto;

text-decoration:none;
position:relative;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
overflow:hidden;
}

.tb_level_card:hover{
transform:translateY(-4px);
}

/* ===== HEADER ===== */

.tb_level_head{
display:flex;
gap:14px;
align-items:flex-start;
}

.tb_level_badge{
width:36px;
height:36px;
flex:0 0 36px;

border-radius:50%;
background:rgb(var(--tb-color6));
color:#000;

display:flex;
align-items:center;
justify-content:center;

font-weight:900;
font-size:17px;
}

.tb_level_name{
font-size:16px;
font-weight:900;
line-height:1.35;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;

color:rgb(var(--tb-color1));
}


/* ===== FOOTER ===== */

.tb_level_footer{
align-self:end;
}

/* separator */

.tb_level_separator{
height:1px;
width:100%;
background:linear-gradient(
90deg,
transparent,
rgb(var(--tb-color1)/.18),
transparent
);
margin:8px 0 10px;
}

/* meta row */

.tb_level_meta{
display:flex;
align-items:center;
justify-content:space-between;
}

.tb_level_state{
font-size:13px;
font-weight:900;
}

.tb_level_state.current{
color:rgb(var(--tb-color6));
}

.tb_level_state.completed{
color:#22c55e;
}

.tb_level_state.locked{
color:rgb(var(--tb-color2));
}

.tb_level_coin{
font-size:13px;
font-weight:900;
color:rgb(var(--tb-color6));
}

/* ===== STATE STYLES ===== */

.tb_level_card.current{
border:2px solid rgb(var(--tb-color6));
box-shadow:
0 0 0 1px rgb(var(--tb-color6)/.25),
0 18px 50px rgb(var(--tb-color6)/.10);
}

.tb_level_card.completed{
border:1px solid rgba(34,197,94,.22);
background:linear-gradient(180deg, rgba(34,197,94,.06), rgba(255,255,255,.01));
}

.tb_level_card.completed .tb_level_badge{
background:#22c55e;
color:#04130a;
}

.tb_level_card.locked{
opacity:.55;
border-color:rgba(255,255,255,.06);
pointer-events:none;
}

.tb_level_card.locked .tb_level_badge{
background:rgba(255,255,255,.12);
color:rgba(255,255,255,.7);
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.tb_level_rail_wrap{
padding:28px 20px 60px;
}

.tb_level_card{
min-width:232px;
width:232px;
height:176px;
padding:18px;
border-radius:24px;
}

.tb_level_head{
gap:12px;
min-height:84px;
}

.tb_level_badge{
flex:0 0 34px;
width:34px;
height:34px;
font-size:16px;
}

.tb_level_name{
font-size:15px;
}

.tb_level_arrow{
min-width:22px;
font-size:18px;
opacity:.45;
}

.tb_rail_arrow{
display:none;
}

}