@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --pet:200px;--pad:1.1rem;--bfs:12px;--tfs:8px;--nfs:9px;
  --bg:#0d0a14;
  --wp-bg:rgba(22,12,40,.96);--wp-border:rgba(220,160,255,.3);
  --hab-bg:rgba(14,8,28,.6);--hab-border:rgba(180,120,255,.4);
  --psw-bg:rgba(80,55,130,.98);--psw-border:rgba(160,120,240,.65);
  --psw-active:rgba(120,75,175,.98);
  --title-color:#e8c8ff;--label-color:#d4b0f8;--dl-color:#c098e8;
  --mb-bg:rgba(30,15,55,.9);--mb-color:#d8c0f0;--mb-border:rgba(160,100,240,.35);
  --btn-shadow:rgba(180,80,255,.35);
  --sp-bg:rgba(40,20,70,.9);--sp-border:rgba(180,120,255,.4);--sp-color:#d0b0f0;
  --sw-border:rgba(220,160,255,.5);--sw-active-border:#e080ff;
  --toggle-bg:rgba(30,15,55,.8);--toggle-border:rgba(180,100,255,.4);--toggle-color:#c0a0e8;
  --bar-happy:#ff60a0;--bar-crystal:#9060ff;
}
body.medium{
  --bg:#1e1238;--wp-bg:rgba(36,20,64,.98);--wp-border:rgba(200,140,255,.35);
  --hab-bg:rgba(28,14,52,.7);--hab-border:rgba(180,120,255,.45);
  --psw-bg:rgba(60,40,100,.95);--psw-border:rgba(160,120,240,.6);
  --psw-active:rgba(100,60,160,.98);
  --title-color:#d8a8ff;--label-color:#c090f0;--dl-color:#a870d8;
  --mb-bg:rgba(40,20,72,.95);--mb-color:#d0b0f8;--mb-border:rgba(160,100,240,.4);
  --btn-shadow:rgba(180,80,255,.3);
  --sp-bg:rgba(50,28,90,.95);--sp-border:rgba(180,120,255,.45);--sp-color:#c8a0f0;
  --sw-border:rgba(200,140,255,.5);--sw-active-border:#d070ff;
  --toggle-bg:rgba(50,28,90,.9);--toggle-border:rgba(180,100,255,.45);--toggle-color:#c090f0;
}
body.light{
  --bg:#f0eafa;--wp-bg:rgba(248,240,255,.97);--wp-border:rgba(180,120,220,.4);
  --hab-bg:rgba(240,228,255,.5);--hab-border:rgba(160,100,200,.4);
  --psw-bg:rgba(230,210,255,.85);--psw-border:rgba(160,100,200,.3);
  --psw-active:rgba(200,160,255,.9);
  --title-color:#6020a0;--label-color:#8040b8;--dl-color:#9050c0;
  --mb-bg:rgba(240,230,255,.95);--mb-color:#5020a0;--mb-border:rgba(160,100,220,.35);
  --btn-shadow:rgba(140,60,200,.25);
  --sp-bg:rgba(235,220,255,.9);--sp-border:rgba(160,100,220,.5);--sp-color:#6030a0;
  --sw-border:rgba(180,120,220,.5);--sw-active-border:#8030d0;
  --toggle-bg:rgba(240,230,255,.9);--toggle-border:rgba(160,100,220,.5);--toggle-color:#5020a0;
}
html,body{height:100%;font-family:'Nunito',sans-serif}
body{background:var(--bg);display:flex;justify-content:center;align-items:flex-start;padding:1rem;transition:background .4s}

/* ── OUTER WRAPPER ─────────────────────────── */
.pu{width:100%;display:flex;justify-content:center}
.wp{
  width:100%;max-width:420px;background:var(--wp-bg);border:1.5px solid var(--wp-border);
  border-radius:20px;padding:var(--pad);display:flex;flex-direction:column;gap:.7rem;
  position:relative;transition:background .4s,border-color .4s;
}

/* ── MODE TOGGLE ───────────────────────────── */
.mode-toggle{
  position:absolute;top:var(--pad);left:var(--pad);
  display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;cursor:pointer;
  background:var(--toggle-bg);border:1.5px solid var(--toggle-border);color:var(--toggle-color);
  font-size:11px;font-weight:800;font-family:'Nunito',sans-serif;transition:all .3s;z-index:15;
}
.toggle-icon{font-size:14px}
.toggle-track{width:28px;height:16px;border-radius:8px;background:#5a3080;position:relative;transition:background .3s}
body.medium .toggle-track{background:#7040a0}
body.light  .toggle-track{background:#c080e0}
.toggle-thumb{width:12px;height:12px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .3s}
body.medium .toggle-thumb{left:8px}
body.light  .toggle-thumb{left:14px}

/* ── MUTE BUTTON ───────────────────────────── */
.mute-btn{
  position:static;cursor:pointer;
  display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:10px;
  background:var(--sp-bg);border:1.5px solid var(--sp-border);color:var(--sp-color);
  font-family:'Press Start 2P',monospace;font-size:5.5px;letter-spacing:.3px;transition:background .2s;
}
.mute-btn:hover{background:rgba(70,35,110,.95)}
#recBtn{border-color:rgba(255,80,80,.5);color:#ff9090}
#recBtn:hover{background:rgba(100,20,20,.9)}
#recBtn.recording{background:rgba(160,20,20,.9);border-color:rgba(255,80,80,.8);color:#ff4040;animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.55}}
.rec-overlay{position:fixed;inset:0;pointer-events:none;z-index:9998;border:3px solid transparent;border-radius:4px;transition:border-color .3s}
.rec-overlay.active{border-color:rgba(255,40,40,.7);animation:recBorder 1.2s ease-in-out infinite}
@keyframes recBorder{0%,100%{border-color:rgba(255,40,40,.7)}50%{border-color:rgba(255,40,40,.15)}}
.rec-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(20,8,40,.96);border:1.5px solid rgba(200,120,255,.4);border-radius:14px;padding:10px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:#e0c8ff;z-index:9999;pointer-events:none;opacity:0;transition:opacity .4s;white-space:nowrap;text-align:center}
.rec-toast.show{opacity:1}

/* ── TITLE BAR ─────────────────────────────── */
.tb{
  font-family:'Press Start 2P',monospace;font-size:var(--tfs);color:var(--title-color);
  letter-spacing:1px;text-align:center;padding-top:2.2rem;
}
.td{display:inline-block;width:8px}

/* ── NAME ROW ──────────────────────────────── */
.name-row{display:flex;align-items:center;justify-content:center;gap:.5rem}
.name-display{
  font-family:'Press Start 2P',monospace;font-size:var(--nfs);color:var(--title-color);
  padding:6px 18px;border-radius:14px;background:rgba(80,30,130,.5);border:1.5px solid rgba(200,120,255,.4);
  cursor:text;letter-spacing:1px;transition:background .2s,border-color .2s;
}
.name-display:hover{background:rgba(100,40,160,.6);border-color:rgba(200,120,255,.7)}
.name-edit{
  font-family:'Press Start 2P',monospace;font-size:var(--nfs);color:var(--title-color);
  padding:6px 18px;border-radius:14px;background:rgba(80,30,130,.7);border:1.5px solid rgba(200,120,255,.7);
  width:180px;text-align:center;outline:none;display:none;
}
.edit-hint{font-size:15px;cursor:pointer;opacity:.6;transition:opacity .2s}
.edit-hint:hover{opacity:1}

/* ── HABITAT ───────────────────────────────── */
.hab{
  width:100%;border-radius:14px;overflow:hidden;border:2px solid var(--hab-border);
  background:var(--hab-bg);position:relative;transition:border-color .4s;aspect-ratio:3/2;
}
.hbg{
  position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(135deg,#060818,#101828);overflow:hidden;
}
.hbg.active{opacity:1}
.scene-svg{width:100%;height:100%;display:block}

/* ── PET WRAPPER ───────────────────────────── */
.pet-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5}
.cw{
  display:flex;align-items:center;justify-content:center;
  transition:filter .6s;
}
.cw.state-neglected{filter:saturate(0) brightness(.7)}
.cw.state-dirty{filter:saturate(.3) sepia(.5) brightness(.85)}
.cw.state-sad{filter:saturate(.4) brightness(.85)}
.cw.state-lonely{filter:saturate(.75)}
#catsvg{width:var(--pet);height:var(--pet);filter:drop-shadow(0 4px 18px rgba(120,60,200,.45))}
.cw.fed{animation:fedBounce .55s cubic-bezier(.36,.07,.19,.97)}
.cw.purring{animation:purrWiggle .55s ease-in-out}
@keyframes fedBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) scale(1.06,1.02)}60%{transform:translateY(-5px)}80%{transform:translateY(-9px)}}
@keyframes purrWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}

/* ── STAT BARS ─────────────────────────────── */
.sr{display:flex;gap:10px;width:100%;margin-top:2px}
.sp{display:flex;align-items:center;gap:5px;flex:1;font-size:12px}
.sb{flex:1;height:10px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.sf{height:100%;border-radius:5px;transition:width .6s ease}
.sfp{background:linear-gradient(90deg,#ff60a0,#ff90d0);box-shadow:0 0 6px rgba(255,100,160,.5)}
.sfl{background:linear-gradient(90deg,#9060ff,#c080ff);box-shadow:0 0 6px rgba(160,80,255,.5)}

/* ── MOOD BADGE ────────────────────────────── */
.state-badge{
  position:static;
  font-family:'Press Start 2P',monospace;font-size:5.5px;padding:3px 7px;
  border-radius:8px;letter-spacing:.3px;text-align:center;
}
.badge-happy   {background:rgba(80,200,120,.25);border:1px solid rgba(100,220,140,.5);color:#80e0a0}
.badge-content {background:rgba(80,120,200,.25);border:1px solid rgba(100,140,220,.5);color:#90b0f0}
.badge-lonely  {background:rgba(180,120,80,.25);border:1px solid rgba(200,140,100,.5);color:#e0b880}
.badge-sad     {background:rgba(80,100,180,.25);border:1px solid rgba(100,120,200,.5);color:#a0b0e8}
.badge-neglected{background:rgba(60,50,80,.4);border:1px solid rgba(100,80,120,.5);color:#9080a8}

/* ── OVERLAY LAYERS ────────────────────────── */
.items-layer{position:absolute;inset:0;pointer-events:all;z-index:6;border-radius:14px;overflow:visible}
.dust-layer{position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:14px;background:radial-gradient(ellipse at 50% 100%,rgba(80,60,40,.35) 0%,transparent 70%);opacity:0;transition:opacity 1.5s}
.cobweb-layer{position:absolute;top:4px;right:6px;z-index:9;width:60px;height:50px;pointer-events:none;opacity:0;transition:opacity 1.5s}
.cobweb-layer svg{width:100%;height:100%}

/* ── PLACED ITEMS ──────────────────────────── */
.placed-item{position:absolute;cursor:grab;touch-action:none;user-select:none;transform-origin:center center;-webkit-user-select:none;}
.placed-item.dragging{cursor:grabbing;z-index:99}
.placed-item.selected{outline:2px dashed rgba(200,150,255,.7);outline-offset:3px;border-radius:4px}
.placed-item.just-placed{animation:itemPop .35s cubic-bezier(.18,.89,.32,1.28) both}
@keyframes itemPop{0%{transform:scale(0) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}
.item-toolbar{position:absolute;top:-40px;left:50%;transform:translateX(-50%);display:flex;gap:3px;z-index:100;white-space:nowrap;background:rgba(20,8,40,.85);border:1px solid rgba(180,120,255,.3);border-radius:8px;padding:3px 5px}
.item-tbtn{background:transparent;border:none;border-radius:5px;color:#e0c8ff;font-size:9px;padding:2px 4px;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;line-height:1}
.item-tbtn:hover{background:rgba(120,60,180,.6)}
.item-tbtn.del{color:#ffaaaa}

/* ── SPARKS / PARTICLES ────────────────────── */
.sl{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.spark{position:fixed;font-size:13px;pointer-events:none;animation:sparkFly 1.3s ease-out forwards}
@keyframes sparkFly{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0);opacity:0}}
.heart-p{position:fixed;font-size:15px;pointer-events:none;animation:heartFloat 1.5s ease-out forwards}
@keyframes heartFloat{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--hx),-70px) scale(.4);opacity:0}}
.zzz{position:fixed;pointer-events:none;animation:zzzFloat 2.6s ease-out forwards;font-family:'Press Start 2P',monospace;color:#9080a8;opacity:.7}
@keyframes zzzFloat{0%{transform:translate(0,0);opacity:.7}100%{transform:translate(10px,-40px);opacity:0}}
.tear{position:fixed;pointer-events:none;animation:tearDrop 1.9s ease-in forwards;font-size:9px}
@keyframes tearDrop{0%{transform:translateY(0);opacity:.8}100%{transform:translateY(30px);opacity:0}}

/* ── MESSAGE BOX ───────────────────────────── */
.mb{
  text-align:center;padding:.55rem .8rem;border-radius:12px;min-height:36px;
  background:var(--mb-bg);border:1px solid var(--mb-border);color:var(--mb-color);
  font-size:.82rem;font-weight:700;letter-spacing:.2px;transition:opacity .3s,background .4s;
}

/* ── ACTION BUTTONS ────────────────────────── */
.br{display:flex;gap:.5rem;flex-wrap:wrap}
.pb{
  flex:1;padding:.6rem .4rem;border-radius:14px;border:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:var(--bfs);font-weight:900;
  letter-spacing:.5px;transition:transform .15s,box-shadow .15s,filter .15s;
  box-shadow:0 4px 14px var(--btn-shadow);
}
.pb:active{transform:scale(.96)}
.bf{background:linear-gradient(135deg,#d040f8,#9020c8);color:#fff}
.bf:hover{filter:brightness(1.12)}
.bpt{background:linear-gradient(135deg,#4090f8,#2060d0);color:#fff}
.bpt:hover{filter:brightness(1.12)}
.bd{background:linear-gradient(135deg,#f83080,#c02060);color:#fff}
.bd:hover{filter:brightness(1.12)}
.bc{background:linear-gradient(135deg,#20c8e8,#1090b8);color:#fff}
.bc:hover{filter:brightness(1.12)}

/* ── SECTION LABELS ────────────────────────── */
.sec-label{
  font-family:'Press Start 2P',monospace;font-size:6px;color:#b0a0c8;
  text-align:center;letter-spacing:.8px;margin-bottom:3px;
}

/* ── CONTROL PANEL ─────────────────────────── */
.cpanel{display:flex;flex-direction:column;gap:5px}

/* ── HABITAT PICKER ────────────────────────── */
.bgrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bgsw{
  width:52px;height:42px;border-radius:10px;cursor:pointer;border:2px solid var(--psw-border);
  overflow:hidden;transition:transform .15s,border-color .2s;flex-shrink:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.bgsw.active{border-color:var(--sw-active-border);transform:scale(1.06)}
.bgsw:hover{transform:scale(1.06)}
.bgsw-inner{font-size:16px;text-align:center;line-height:1}
.bgsw-label{font-family:'Press Start 2P',monospace;font-size:5px;color:#fff;text-align:center;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.8);margin-top:1px}

/* ── COAT SWATCHES ─────────────────────────── */
.swatches{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sw{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:2px solid var(--sw-border);transition:transform .15s,border-color .2s;
}
.sw.active{border-color:var(--sw-active-border);transform:scale(1.15)}
.sw:hover{transform:scale(1.12)}

/* ── PATTERN PICKER ────────────────────────── */
.prow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.psw{
  width:38px;height:32px;border-radius:10px;cursor:pointer;
  border:2px solid rgba(150,120,220,.6);background:rgba(90,65,140,.98);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  transition:transform .15s,border-color .2s,background .3s;flex-shrink:0;
}
.psw.active{border-color:var(--sw-active-border);background:var(--psw-active);transform:scale(1.08)}
.psw:hover{transform:scale(1.06)}

/* ── SYMBOL PICKER ─────────────────────────── */
.symrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ssw{
  width:36px;height:36px;border-radius:10px;cursor:pointer;
  border:2px solid rgba(150,120,220,.6);background:rgba(90,65,140,.98);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,border-color .2s;
}
.ssw.active{border-color:var(--sw-active-border);background:var(--psw-active);transform:scale(1.08)}
.ssw:hover{transform:scale(1.06)}
.ssw svg{width:22px;height:22px}

/* ── HABITAT / STATE LABELS ────────────────── */
.dl{
  font-family:'Press Start 2P',monospace;font-size:6px;color:var(--dl-color);
  text-align:center;letter-spacing:.6px;margin-top:2px;
}
.state-info{text-align:center;font-size:.65rem;color:var(--dl-color);font-weight:700;min-height:14px;letter-spacing:.3px}

/* ── DECOR MODAL ───────────────────────────── */
.decor-modal{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(8,4,20,.75);border-radius:20px;backdrop-filter:blur(3px)}
.decor-modal-inner{background:var(--wp-bg);border:2px solid var(--wp-border);border-radius:16px;padding:1rem;width:92%;max-height:82%;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.decor-modal-title{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--title-color);text-align:center;letter-spacing:.5px}
.decor-section-title{font-family:'Press Start 2P',monospace;font-size:5px;color:#a094bc;letter-spacing:.4px;padding:3px 0}
.decor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.decor-btn{background:var(--sp-bg);border:2px solid var(--sp-border);border-radius:12px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .15s,border-color .2s}
.decor-btn:hover{transform:scale(1.08);border-color:var(--title-color)}
.decor-btn svg{width:36px;height:36px}
.decor-btn-label{font-family:'Press Start 2P',monospace;font-size:4.5px;color:#a094bc;text-align:center;line-height:1.4}
.decor-placed-label{font-family:'Press Start 2P',monospace;font-size:6px;color:#a094bc;letter-spacing:.4px;margin-top:4px}
.decor-placed{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}
.placed-tag{background:var(--sp-bg);border:1.5px solid var(--sp-border);border-radius:8px;padding:3px 8px;font-size:10px;color:var(--sp-color);font-family:'Nunito',sans-serif;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:4px}
.placed-tag:hover{border-color:#ff6080;color:#ff9090}
.decor-close-btn{width:100%;padding:9px;border-radius:12px;border:none;background:linear-gradient(135deg,#7c20c8,#c040e8);color:#fff;font-family:'Nunito',sans-serif;font-size:13px;font-weight:900;cursor:pointer;margin-top:4px}
.decor-close-btn:hover{filter:brightness(1.12)}


/* ── TOP-RIGHT CLUSTER ─────────────────────── */
.top-right-cluster{
  position:absolute;top:var(--pad);right:var(--pad);z-index:15;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
/* ── RESPONSIVE ────────────────────────────── */
@media(max-width:380px){
  :root{--pet:140px;--pad:.75rem;--bfs:10px;--tfs:6.5px;--nfs:7.5px}
  .pb{font-size:10px;padding:.5rem .3rem}
  .bgsw{width:44px;height:36px}
}
@media(min-width:601px){
  :root{--pet:220px}
  .wp{max-width:460px}
}

/* ── SHOWER ANIMATION ──────────────────────── */
.cw.showering{animation:showerBounce .6s ease-in-out}
@keyframes showerBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-8px) rotate(-3deg)}50%{transform:translateY(-12px)}75%{transform:translateY(-6px) rotate(3deg)}}
.shower-drop{position:fixed;pointer-events:none;font-size:11px;color:#80d8ff;animation:dropFall 1.2s ease-in forwards}
@keyframes dropFall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(60px);opacity:0}}