/* ===================================================
   PurrVerse Responsive v2
===================================================*/

/* ============================= */
/* Laptop */
/* ============================= */

@media (max-width:1400px){

.hero{

grid-template-columns:1fr;

}

.right-panel{

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

}

.pet-card{

margin-bottom:20px;

}

}

/* ============================= */
/* Tablet */
/* ============================= */

@media (max-width:1024px){

.sidebar{

width:90px;

padding:20px 10px;

}

.logo{

font-size:18px;

text-align:center;

}

.sidebar a{

font-size:13px;

text-align:center;

padding:15px 5px;

}

.content{

margin-left:90px;

padding:25px;

}

.status-grid{

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

}

.action-grid{

grid-template-columns:1fr;

}

.reward-grid{

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

}

.inventory-grid{

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

}

}

/* ============================= */
/* Mobile */
/* ============================= */

@media (max-width:768px){

.sidebar{

position:relative;

width:100%;

height:auto;

display:flex;

overflow-x:auto;

gap:10px;

padding:15px;

}

.logo{

display:none;

}

.sidebar a{

min-width:120px;

white-space:nowrap;

margin:0;

}

.content{

margin-left:0;

padding:20px;

}

header{

justify-content:center;

margin-bottom:25px;

}

.hero{

display:flex;

flex-direction:column;

gap:20px;

}

.pet-stage{

margin:20px 0;

}

.pet-image{

width:140px;

}

.status-grid{

grid-template-columns:1fr;

}

.status-card{

padding:15px;

}

.action-grid{

grid-template-columns:1fr;

}

.reward-grid{

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

}

.inventory-grid{

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

}

.right-panel{

display:flex;

flex-direction:column;

}

.card{

padding:20px;

}

}

/* ============================= */
/* Small Phone */
/* ============================= */

@media (max-width:480px){

body{

font-size:14px;

}

.pet-card{

padding:20px;

}

.pet-image{

width:110px;

}

.level-badge{

font-size:11px;

padding:6px 12px;

}

.xp-text{

font-size:11px;

}

.reward-grid{

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

}

.inventory-grid{

grid-template-columns:1fr;

}

.status-card h4{

font-size:13px;

}

.claim-btn{

font-size:14px;

padding:12px;

}

.action-grid button{

padding:14px;

font-size:14px;

}

.sidebar{

padding:10px;

}

}

/* ============================= */
/* Large Desktop */
/* ============================= */

@media (min-width:1700px){

.hero{

grid-template-columns:520px 1fr;

}

.pet-image{

width:220px;

}

.content{

max-width:1600px;

margin:auto;

margin-left:260px;

}

}