:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
  background:#12131a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#12131a}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -20%,rgba(129,111,255,.42),transparent 42%),
    linear-gradient(180deg,#1b1b2b 0%,#111219 70%);
}
button,input,select{font:inherit}
button{cursor:pointer}
header{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px max(14px,env(safe-area-inset-right)) 14px;
  background:rgba(18,19,27,.86);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
header b{font-size:20px;letter-spacing:.2px}
header small{display:block;color:#aeb2c5;margin-top:2px}
.wallet{display:flex;gap:8px}
.wallet span{
  padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
}
main{max-width:760px;margin:auto;padding:12px 12px 30px}
.card{
  background:rgba(31,33,45,.92);
  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:0 16px 45px rgba(0,0,0,.22);
}
.hidden{display:none!important}
h1,h2,p{margin-top:0}
label{display:block;margin:14px 0 7px;color:#c5c8d7}
select,input{
  width:100%;border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px;background:#11131b;color:#fff;font-size:16px;
}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender button,.actions button,.tabs button,.primary{
  border:0;border-radius:15px;padding:14px;color:#fff;
  background:#343746;font-weight:750;
}
.choice.active{outline:2px solid #a694ff;background:#51479a}
.primary{
  width:100%;margin-top:18px;
  background:linear-gradient(135deg,#7b68ee,#d15bf3);
  font-size:16px;
}

/* ---------- PET ROOM ---------- */
.room{
  position:relative;
  overflow:hidden;
  min-height:520px;
  padding:0;
  text-align:center;
  background:
    linear-gradient(180deg,#7770a7 0 54%,#b08a6f 54% 100%);
}
.room::after{
  content:"";
  position:absolute;left:0;right:0;top:54%;height:7px;
  background:rgba(65,43,43,.34);
  box-shadow:0 8px 25px rgba(0,0,0,.18);
}
.room-window{
  position:absolute;z-index:1;left:22px;top:28px;
  width:118px;height:150px;border-radius:18px;
  border:9px solid rgba(255,255,255,.55);
  background:
    linear-gradient(90deg,transparent 47%,rgba(255,255,255,.48) 47% 53%,transparent 53%),
    linear-gradient(0deg,transparent 47%,rgba(255,255,255,.48) 47% 53%,transparent 53%),
    linear-gradient(180deg,#75bce3,#dceff8 72%,#83b47b 72%);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.room-shelf{
  position:absolute;z-index:1;right:22px;top:62px;
  width:112px;height:12px;border-radius:7px;background:#765140;
  box-shadow:0 58px 0 #765140,0 5px 12px rgba(0,0,0,.22);
}
.room-shelf::before,.room-shelf::after{
  content:"";position:absolute;bottom:10px;border-radius:6px 6px 2px 2px;
  background:#e0ad62;
}
.room-shelf::before{width:24px;height:42px;left:15px}
.room-shelf::after{width:31px;height:31px;right:13px;background:#77b88d}
.room-rug{
  position:absolute;z-index:1;left:50%;bottom:72px;
  width:330px;height:105px;transform:translateX(-50%);
  border-radius:50%;background:rgba(245,215,173,.72);
  box-shadow:0 8px 30px rgba(61,38,28,.18);
}
.pet-stage{
  position:relative;z-index:4;
  height:390px;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.pet-model{
  width:100%;height:100%;
  --poster-color:transparent;
  background:transparent;
}
.pet-fallback{
  font-size:110px;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.28));
  animation:float 2.8s ease-in-out infinite;
}
.model-loading{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  padding:8px 12px;border-radius:14px;
  background:rgba(17,18,27,.7);font-size:13px;
}
.pet-info{
  position:relative;z-index:5;
  padding:0 16px 18px;
  background:linear-gradient(180deg,transparent,rgba(28,27,38,.74) 26%,rgba(28,27,38,.94));
}
.pet-info h2{margin:0 0 5px;font-size:25px}
.muted{color:#d1cfda;font-size:13px}
.bubble{
  display:inline-block;margin-top:10px;padding:9px 14px;border-radius:18px;
  background:#fff;color:#23242d;font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
@keyframes float{50%{transform:translateY(-8px)}}

/* ---------- GAME UI ---------- */
.needs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:9px;margin-bottom:12px;
}
.need{background:#20222d;border-radius:15px;padding:11px;border:1px solid rgba(255,255,255,.035)}
.need-title{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.bar{height:8px;background:#101118;border-radius:10px;overflow:hidden;margin-top:8px}
.bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,#6cdb9a,#e9d86b);
  border-radius:10px;transition:width .35s ease;
}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions button{
  min-height:50px;
  background:linear-gradient(180deg,#3a3d4e,#303342);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.actions button:active,.tabs button:active{transform:scale(.97)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tabs button{background:#292c39}
#panel button{margin:5px;padding:10px;border:0;border-radius:12px}
.shoprow{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);
}

@media(max-width:430px){
  main{padding-left:8px;padding-right:8px}
  .room{min-height:475px}
  .pet-stage{height:345px}
  .room-window{transform:scale(.82);transform-origin:top left}
  .room-shelf{transform:scale(.82);transform-origin:top right}
  .room-rug{width:270px}
  .needs{grid-template-columns:1fr 1fr}
}