/* PurrVerse Complete style.css */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#090b13;
--panel:#111827;
--panel2:#182033;
--text:#fff;
--primary:#6b5cff;
}
body{
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}
.background-glow{
position:fixed;
width:900px;
height:900px;
left:-250px;
top:-250px;
background:radial-gradient(circle,#6b5cff55,transparent 70%);
filter:blur(90px);
z-index:-1;
}
.sidebar{
position:fixed;
left:0;top:0;
width:240px;
height:100vh;
padding:24px;
background:#0f1424;
border-right:1px solid rgba(255,255,255,.08);
overflow:auto;
}
.logo{font-size:30px;font-weight:800;margin-bottom:30px}
.sidebar a{
display:block;
padding:14px 16px;
margin-bottom:10px;
text-decoration:none;
color:#d8d8e8;
border-radius:14px;
transition:.25s;
cursor:pointer;
}
.sidebar a.active,
.sidebar a:hover{
background:linear-gradient(135deg,#6b5cff,#4d8cff);
color:#fff;
}
.content{
margin-left:240px;
padding:30px;
}
header{
display:flex;
justify-content:flex-end;
margin-bottom:25px;
}
#connectWallet{
padding:14px 22px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#6b5cff,#4d8cff);
color:#fff;
font-weight:700;
cursor:pointer;
}
.hero{
display:grid;
grid-template-columns:520px 1fr;
gap:24px;
align-items:start;
}
.pet-card,.card,.glass{
background:rgba(17,24,39,.85);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:24px;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.top-info{display:flex;flex-direction:column;gap:14px}
.level-badge{
display:inline-block;
padding:8px 18px;
background:var(--primary);
border-radius:999px;
font-size:13px;
font-weight:700;
width:max-content;
}
.xp{height:10px;background:#28314a;border-radius:99px;overflow:hidden}
.xp-fill{height:100%;width:65%;background:linear-gradient(90deg,#6b5cff,#19d3ff)}
.xp-text{margin-top:8px;font-size:13px;opacity:.8}
.pet-stage{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:260px;
}
.pet-glow{
position:absolute;
width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,#6b5cff66,transparent 70%);
filter:blur(35px);
}
.pet-image{width:180px;position:relative;z-index:2}
.status-grid,.action-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:22px;
}
.status-card,.item{
background:var(--panel2);
padding:16px;
border-radius:18px;
text-align:center;
}
.status-bar,.quest-bar{
height:8px;
background:#2a3350;
border-radius:99px;
overflow:hidden;
margin:8px 0;
}
.happy-fill{width:85%;height:100%;background:#ff4da6}
.hunger-fill{width:70%;height:100%;background:#ffb000}
.energy-fill{width:90%;height:100%;background:#19d3ff}
.quest-fill{height:100%;background:var(--primary)}
.feed-btn,.play-btn,.sleep-btn,.claim-btn{
border:none;
border-radius:18px;
padding:16px;
font-weight:700;
color:#fff;
cursor:pointer;
}
.feed-btn{background:#ff7a00}
.play-btn{background:#6b5cff}
.sleep-btn{background:#00bcd4}
.claim-btn{width:100%;background:linear-gradient(135deg,#6b5cff,#7b68ff);margin-top:18px}
.right-panel{display:grid;gap:20px}
.reward-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
margin:15px 0;
}
.reward{
background:#1b2337;
padding:14px;
border-radius:14px;
text-align:center;
}
.reward.active{background:#28c76f}
.reward.today{background:#6b5cff}
.inventory-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-top:15px;
}
.item p{margin:8px 0}
.quest{margin:14px 0}
@media(max-width:1024px){
.hero{grid-template-columns:1fr}
.content{margin-left:90px}
.sidebar{width:90px;padding:15px}
.logo{font-size:18px}
}
@media(max-width:768px){
.sidebar{position:relative;width:100%;height:auto;display:flex;gap:10px}
.logo{display:none}
.content{margin-left:0;padding:20px}
.hero{grid-template-columns:1fr}
.status-grid,.action-grid{grid-template-columns:1fr}
.inventory-grid{grid-template-columns:repeat(2,1fr)}
.reward-grid{grid-template-columns:repeat(4,1fr)}
}
.pet-stage{
    position:relative;
    width:260px;
    height:260px;
    margin:40px auto;
}

.pet-stage img{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    user-select:none;
    pointer-events:none;
}

.shadow{
    width:180px;
    bottom:5px;
    z-index:0;
}

.tail{
    width:95px;
    bottom:45px;
    right:10px;
    z-index:1;
    transform-origin:15% 80%;
}

.body{
    width:220px;
    bottom:15px;
    z-index:2;
}

.ears{
    width:170px;
    top:5px;
    z-index:3;
}

.eyes{
    width:70px;
    top:72px;
    z-index:4;
}