:root{--p:#7655ff;--ink:#29234f;--muted:#6d6683;--pink:#ff5c9a;--green:#23b878;--line:#e5ddf5}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f5f0ff,#f8fcff 55%,#fff8df)}
a{color:inherit}.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}.navin{max-width:1200px;margin:auto;padding:13px 18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}.logo{font-weight:950;font-size:1.25rem;text-decoration:none}.links{display:flex;gap:13px;flex-wrap:wrap;font-weight:800}.links a{text-decoration:none}
.wrap{max-width:1200px;margin:auto;padding:25px 18px 70px}.hero{text-align:center;padding:28px}.hero .icon{font-size:3.5rem}.hero h1{font-size:clamp(2.3rem,5vw,4rem);margin:10px 0}.hero p{max-width:760px;margin:auto;color:var(--muted);line-height:1.55}
.btn{border:0;background:var(--p);color:#fff;border-radius:15px;padding:12px 17px;font-weight:900;text-decoration:none;cursor:pointer}.btn.alt{background:#eee9ff;color:var(--p)}.btn.green{background:#dff8ec;color:#08764b}.btn.pink{background:#ffe2ef;color:#bf2e6c}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px;margin:18px 0}.panel h2{margin-top:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{text-align:center;padding:15px;background:#fff;border:1px solid var(--line);border-radius:20px}.stat b{display:block;font-size:1.7rem;color:var(--p)}.stat span{font-size:.8rem;color:var(--muted);font-weight:800}
.room{position:relative;max-width:950px;height:570px;margin:auto;border-radius:30px;overflow:hidden;border:3px solid #ded5f3;background:linear-gradient(#cfeeff 0 68%,#b9e8b3 68% 100%)}.wall{position:absolute;inset:0 0 32%;background:radial-gradient(circle at 20% 25%,#fff 0 3%,transparent 3.5%),radial-gradient(circle at 75% 18%,#fff 0 3%,transparent 3.5%);opacity:.8}.floor{position:absolute;left:6%;right:6%;bottom:20px;height:90px;background:#f0d2bb;border-radius:25px}.item{position:absolute;font-size:3.5rem;cursor:grab;user-select:none;touch-action:none;z-index:4;filter:drop-shadow(0 5px 4px rgba(0,0,0,.12))}.item:active{cursor:grabbing}.room-name{position:absolute;top:18px;left:20px;background:#fff;border-radius:15px;padding:9px 13px;font-weight:900;z-index:5}
.shop{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.shopitem{border:2px solid var(--line);background:#fff;border-radius:18px;padding:12px;text-align:center;cursor:pointer;font-size:2rem}.shopitem small{display:block;font-size:.72rem;font-weight:900;color:var(--muted)}.shopitem.locked{opacity:.4}
.petbox{max-width:650px;margin:auto;text-align:center;background:linear-gradient(#eefaff,#fff7df);border:2px solid var(--line);border-radius:30px;padding:25px}.pet{font-size:9rem;line-height:1.1}.petname{font-size:1.5rem;font-weight:950}.meter{height:15px;background:#ece8f4;border-radius:99px;overflow:hidden;margin:7px 0 14px}.meter span{display:block;height:100%;width:60%;background:linear-gradient(90deg,var(--green),#8de46b);transition:.25s}.petactions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.message{min-height:28px;text-align:center;font-weight:900;color:var(--p);margin:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px}.card h3{margin:8px 0}.card p{color:var(--muted);line-height:1.45}
@media(max-width:900px){.shop{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.room{height:470px}.item{font-size:2.8rem}.shop{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}}