:root{
  --safe:#5fd08a;
  --warn:#ffc24a;
  --danger:#ff5a52;
  --gold:#ffce6b;
  --spray:#9fe0ff;
  --ink:#efe7df;
  --panel:#fff8ef;
  --panel-ink:#43354a;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Quicksand', ui-rounded, 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 100% at 50% 0%, #4a3f57 0%, #342b41 55%, #241d2e 100%) fixed;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  -webkit-user-select:none; user-select:none;
  overflow-x:hidden;
}
.game{ width:100%; max-width:560px; }

/* ----------------------------- HUD ----------------------------- */
.hud{ display:flex; align-items:stretch; gap:7px; margin-bottom:8px; }
.stat{
  flex:1; text-align:center; padding:5px 6px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.stat .lbl{ display:block; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; font-weight:800; }
.stat .val{ font-size:1.3rem; font-weight:900; line-height:1.1; }
.stat.time .val.low{ color:var(--danger); animation:tickpulse .5s ease; }
@keyframes tickpulse{ 0%{ transform:scale(1.35);} 100%{ transform:scale(1);} }
.mute{
  width:44px; border-radius:14px; font-size:1.1rem; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:var(--ink);
}
.mute:active{ transform:translateY(1px); }

/* ----------------------------- Stage ----------------------------- */
.stage{
  position:relative; width:100%; aspect-ratio:13/11; border-radius:22px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.stage.shake{ animation:flinch .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes flinch{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-9px,4px) rotate(-.4deg); }
  35%{ transform:translate(8px,-3px) rotate(.4deg); }
  55%{ transform:translate(-6px,3px); }
  75%{ transform:translate(5px,-2px); }
}

/* room */
.wall{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 72% 26%, rgba(255,206,120,.22), transparent 60%),
    linear-gradient(#5b4a68 0%, #463a55 45%, #382e47 100%);
}
.wall::after{ /* baseboard + floor */
  content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(#6a4f3e, #533c2e);
  box-shadow:inset 0 6px 10px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.06);
}
.window{
  position:absolute; right:9%; top:9%; width:30%; height:30%; border-radius:8px;
  background:
    linear-gradient(160deg, #ffe6a8, #ffc06a 45%, #e98aa0 78%, #8a6fb0 100%);
  box-shadow:0 0 38px 8px rgba(255,200,120,.35), inset 0 0 0 5px #6a4f3e, inset 0 0 0 7px rgba(0,0,0,.2);
}
.window::before, .window::after{ content:''; position:absolute; background:#6a4f3e; }
.window::before{ left:50%; top:5%; bottom:5%; width:5px; transform:translateX(-50%); }
.window::after{ top:50%; left:5%; right:5%; height:5px; transform:translateY(-50%); }
.lightbeam{
  position:absolute; right:14%; top:30%; width:46%; height:62%;
  background:linear-gradient(200deg, rgba(255,214,140,.22), transparent 60%);
  transform:skewX(-12deg); pointer-events:none; filter:blur(2px);
}
.rug{
  position:absolute; left:8%; right:8%; bottom:2.5%; height:13%; border-radius:50%;
  background:radial-gradient(circle, #8a4a55 0%, #79404c 55%, #5f3340 100%);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.08), inset 0 0 0 10px #6e3a46, 0 6px 14px rgba(0,0,0,.3);
  opacity:.9;
}

/* ----------------------------- Watcher ----------------------------- */
.watcher{ position:absolute; left:6%; top:3%; width:46%; height:40%; pointer-events:none; }
.couch{
  position:absolute; left:0; bottom:0; width:100%; height:62%; border-radius:26px 26px 14px 14px;
  background:linear-gradient(#7d6a86, #5f5070);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.1), inset 0 -10px 18px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.3);
}
.couch::before, .couch::after{ content:''; position:absolute; bottom:8%; width:20%; height:80%; border-radius:18px; background:linear-gradient(#8a7593,#675778); }
.couch::before{ left:-4%; }
.couch::after{ right:-4%; }
.person{ position:absolute; left:30%; bottom:34%; width:40%; height:70%; }
.head{
  position:absolute; left:50%; bottom:38%; width:64%; aspect-ratio:1/1; transform:translateX(-50%);
  border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 38% 34%, #f0c39a, #d79f73);
  box-shadow:inset -6px -6px 10px rgba(0,0,0,.18);
  transition:transform .25s ease;
}
.head::before{ /* hair */
  content:''; position:absolute; left:-8%; right:-8%; top:-14%; height:56%; border-radius:50% 50% 40% 40%;
  background:linear-gradient(#4a3a33,#33271f);
}
.eye{
  position:absolute; top:52%; width:20%; aspect-ratio:1/.7; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  transform:scaleY(.12); transform-origin:center; transition:transform .18s ease;
}
.eye.left{ left:24%; }
.eye.right{ right:24%; }
.eye .pupil{
  position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1/1; border-radius:50%;
  background:#3a2a40; transform:translate(-50%,-50%); transition:transform .2s ease;
}
.newspaper{
  position:absolute; left:-14%; right:-14%; bottom:-6%; height:62%; border-radius:6px 6px 3px 3px;
  background:repeating-linear-gradient(#f4efe6, #f4efe6 5%, #d9d2c6 5%, #d9d2c6 6%), #f4efe6;
  box-shadow:0 -3px 8px rgba(0,0,0,.25), inset 0 2px 0 rgba(0,0,0,.08);
  transform:translateY(0); transition:transform .3s cubic-bezier(.34,1.3,.6,1);
  z-index:3;
}
.newspaper::before{ content:''; position:absolute; left:50%; top:8%; width:3px; bottom:8%; background:rgba(0,0,0,.12); transform:translateX(-50%); }
.think{
  position:absolute; right:2%; top:-6%; width:22%; aspect-ratio:1/1; border-radius:50%;
  background:#fff; color:#d98a2b; font-weight:900; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s; z-index:4;
}
.gaze{
  position:absolute; left:42%; top:62%; width:52%; height:170%;
  background:linear-gradient(to bottom, rgba(255,120,110,.32), rgba(255,120,110,0) 78%);
  clip-path:polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
  transform-origin:50% 0; transform:scaleY(0); opacity:0;
  transition:transform .25s ease, opacity .2s ease; filter:blur(1px); z-index:1;
}

/* watcher states */
.watcher.peek .newspaper{ transform:translateY(26%); }
.watcher.peek .eye{ transform:scaleY(.5); }
.watcher.peek .think{ opacity:1; transform:scale(1); }
.watcher.watch .newspaper{ transform:translateY(64%); }
.watcher.watch .eye{ transform:scaleY(1); animation:none; }
.watcher.watch .head{ transform:translateX(-50%) translateY(-4%) scale(1.04); }
.watcher.watch .gaze{ transform:scaleY(1); opacity:1; }
.watcher.away .eye{ transform:scaleY(.12); }

/* ----------------------------- Status banner ----------------------------- */
.status{
  position:absolute; top:3.5%; left:50%; transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:8px; padding:6px 16px; border-radius:999px;
  font-weight:800; font-size:.9rem; white-space:nowrap;
  background:rgba(20,16,26,.55); backdrop-filter:blur(4px);
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition:color .2s, box-shadow .2s;
}
.status .dot{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 10px currentColor; background:currentColor; }
.status.state-away{ color:var(--safe); }
.status.state-peek{ color:var(--warn); animation:peekpulse .4s ease-in-out infinite alternate; }
.status.state-watch{ color:var(--danger); box-shadow:0 0 0 2px rgba(255,90,82,.5), 0 6px 20px rgba(255,90,82,.4); }
@keyframes peekpulse{ from{ transform:translateX(-50%) scale(1);} to{ transform:translateX(-50%) scale(1.06);} }

/* ----------------------------- Table ----------------------------- */
.table{ position:absolute; left:0; right:0; bottom:14%; height:24%; z-index:4; }
.table-top{
  position:absolute; left:3%; right:3%; top:0; height:26%; border-radius:7px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 7px, rgba(255,255,255,.03) 7px 15px),
    linear-gradient(#9a6b44, #7d5739);
  box-shadow:0 -2px 0 rgba(255,255,255,.18) inset, 0 10px 16px rgba(0,0,0,.32);
}
.table-front{
  position:absolute; left:3%; right:3%; top:22%; height:40%; border-radius:0 0 6px 6px;
  background:linear-gradient(#5e4029, #4a3220);
  box-shadow:inset 0 8px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
}
.table-legs{ position:absolute; left:0; right:0; top:60%; height:130%; }
.table-legs span{
  position:absolute; bottom:0; width:6%; height:100%;
  background:linear-gradient(90deg,#4a3220,#3a2719,#2c1d12);
  border-radius:0 0 4px 4px;
}
.table-legs span:first-child{ left:10%; }
.table-legs span:last-child{ right:10%; }
.slots{ position:absolute; inset:0; }

/* ----------------------------- Objects ----------------------------- */
.obj{
  position:absolute; bottom:74%;                 /* sit on the table-top surface */
  transform:translateX(-50%);
  transform-origin:bottom center;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.35));
  will-change:transform; z-index:5;
}
.obj svg{ display:block; width:100%; height:100%; overflow:visible; }
.obj.spawn{ animation:objpop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes objpop{ 0%{ transform:translateX(-50%) translateY(20%) scale(.4); opacity:0; } 100%{ transform:translateX(-50%) translateY(0) scale(1); opacity:1; } }
.obj.teeter{ animation:teeter .5s ease-in-out infinite; }
@keyframes teeter{ 0%,100%{ transform:translateX(-50%) rotate(-3deg);} 50%{ transform:translateX(-50%) rotate(3deg);} }
.obj.saved{ animation:saved .35s ease; }
@keyframes saved{ 0%{ transform:translateX(-50%) rotate(8deg);} 100%{ transform:translateX(-50%) rotate(0);} }
.obj .price{
  position:absolute; left:50%; top:-18%; transform:translateX(-50%);
  font-size:.6rem; font-weight:900; color:#ffe9b0; text-shadow:0 1px 2px rgba(0,0,0,.6);
  opacity:0; transition:opacity .15s;
}
.obj.teeter .price{ opacity:1; }

/* ----------------------------- Cat + paw ----------------------------- */
.cat{
  position:absolute; left:1%; bottom:36%; width:25%; z-index:6;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.4));
  transition:transform .2s ease;
}
.cat svg{ display:block; width:100%; height:auto; overflow:visible; }
.cat.reach{ transform:translateX(6%) rotate(2deg); }
.cat.smug{ animation:smug .5s ease; }
@keyframes smug{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-6%) rotate(-2deg);} }
.cat.busted{ animation:busted .5s ease; }
@keyframes busted{ 0%{ transform:translateX(0);} 25%{ transform:translateX(-6%) scaleY(.92);} 60%{ transform:translateX(3%);} 100%{ transform:translateX(0);} }

.paw{
  position:absolute; width:11%; aspect-ratio:1/1; left:0; bottom:40%;
  background:radial-gradient(circle at 40% 35%, #fbf3ea, #e7d6c6 70%);
  border-radius:46% 46% 50% 50%;
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.15), 0 4px 6px rgba(0,0,0,.3);
  opacity:0; z-index:7; pointer-events:none;
  transform:translate(-50%,0) scale(.6);
}
.paw::before, .paw::after{ content:''; position:absolute; top:-10%; width:26%; height:34%; border-radius:50%; background:inherit; }
.paw::before{ left:14%; }
.paw::after{ right:14%; }
.paw .beans{ position:absolute; left:50%; top:54%; width:34%; height:34%; transform:translate(-50%,-50%); border-radius:50%; background:#e79ab0; }
.paw.swipe{ animation:pawswipe .26s ease; }
@keyframes pawswipe{ 0%{ opacity:0; transform:translate(-50%,-30%) scale(.5) rotate(-18deg);} 40%{ opacity:1; transform:translate(-50%,0) scale(1) rotate(4deg);} 100%{ opacity:0; transform:translate(-50%,10%) scale(.9) rotate(12deg);} }

/* ----------------------------- FX ----------------------------- */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:9; overflow:hidden; }
.shard{ position:absolute; transform:translate(-50%,-50%); will-change:transform;
  animation:shatter var(--dur,.75s) cubic-bezier(.2,.55,.35,1) forwards; }
@keyframes shatter{ to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity:0; } }
.pop{
  position:absolute; transform:translate(-50%,-50%); font-weight:900; font-size:1.25rem;
  text-shadow:0 2px 4px rgba(0,0,0,.5); animation:popup .85s ease-out forwards; white-space:nowrap;
}
.pop.good{ color:var(--gold); }
.pop.big{ color:#ffd86b; font-size:1.6rem; }
.pop.bad{ color:var(--spray); }
@keyframes popup{ 0%{ opacity:0; transform:translate(-50%,-20%) scale(.6);} 18%{ opacity:1; transform:translate(-50%,-60%) scale(1.05);} 100%{ opacity:0; transform:translate(-50%,-150%) scale(1);} }
.dust{ position:absolute; transform:translate(-50%,-50%); border-radius:50%; background:rgba(220,210,195,.5); animation:dust .5s ease-out forwards; }
@keyframes dust{ to{ transform:translate(-50%,-50%) scale(2.4); opacity:0; } }

.flash{ position:absolute; inset:0; z-index:10; pointer-events:none; opacity:0; }
.flash.spray{
  background:radial-gradient(circle at var(--fx,50%) 40%, rgba(159,224,255,.55), rgba(159,224,255,0) 60%);
  animation:flashout .4s ease;
}
@keyframes flashout{ from{ opacity:1;} to{ opacity:0;} }
.watch-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:7; opacity:0;
  box-shadow:inset 0 0 90px 20px rgba(255,60,52,.0);
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(255,40,34,.16));
  transition:opacity .25s ease;
}
.watch-vignette.on{ opacity:1; }
.vignette{ position:absolute; inset:0; pointer-events:none; z-index:7;
  box-shadow:inset 0 0 80px 18px rgba(0,0,0,.4); border-radius:22px; }

/* mist for spray */
.mist{ position:absolute; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(200,240,255,.9), rgba(160,220,255,0) 70%); animation:mist .5s ease-out forwards; }
@keyframes mist{ to{ transform:translate(-50%,-50%) scale(3); opacity:0; } }

/* ----------------------------- Overlays ----------------------------- */
.overlay{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,26,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.active{ opacity:1; pointer-events:auto; }
.panel{
  width:84%; max-width:340px; text-align:center; color:var(--panel-ink);
  background:var(--panel); border-radius:22px; padding:22px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.5); border:3px solid #ffe6c2;
}
.overlay.active .panel{ animation:panelin .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes panelin{ from{ transform:translateY(16px) scale(.92); opacity:0;} to{ transform:none; opacity:1;} }
.logo{ font-size:1.85rem; font-weight:900; color:#e0556f; line-height:1.1; }
.logo span{ font-size:1.6rem; }
.tag{ margin:8px 0 12px; font-weight:600; opacity:.85; font-size:.95rem; }
.rules{ list-style:none; padding:0; margin:0 auto 4px; display:inline-block; text-align:left; }
.rules li{ margin:8px 0; font-weight:600; font-size:.92rem; }
.rules b{ color:#e0556f; }
.rules .emo{ display:inline-block; width:1.7rem; font-size:1.05rem; }
.btn{
  margin-top:14px; font-family:inherit; font-size:1.05rem; font-weight:800; color:#fff;
  background:linear-gradient(#ff8a6a,#ef5d6d); border:none; border-radius:15px; padding:12px 30px;
  cursor:pointer; box-shadow:0 6px 0 #c8455a, 0 10px 18px rgba(230,90,110,.4);
}
.btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #c8455a; }
.hi{ margin-top:10px; font-weight:700; opacity:.8; }
.rank{ font-size:1.1rem; font-weight:800; color:#c2607a; margin:4px 0; }
.scoreboard{ display:flex; gap:8px; margin-top:10px; }
.scoreboard>div{ flex:1; background:#fff1e2; border:2px solid #ffe0c2; border-radius:13px; padding:8px 4px; }
.scoreboard .lbl{ display:block; font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; opacity:.6; }
.scoreboard b{ font-size:1.2rem; }
.rap-sheet{ margin-top:10px; font-size:.85rem; font-weight:700; color:#8a6a52; min-height:1.1em; }
.rap-sheet b{ color:#c2607a; }
.newhigh{ margin-top:8px; font-weight:900; color:#e0556f; display:none; }

.foot{ text-align:center; font-size:.72rem; opacity:.5; margin-top:10px; font-weight:600; }

/* ----------------------------- Ambient polish ----------------------------- */
.cat svg{ animation:breathe 3.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.6%); } }
.cat.reach svg, .cat.smug svg, .cat.busted svg{ animation:none; }

.obj::after{ content:''; position:absolute; inset:-22% -45%; z-index:-1; }   /* bigger tap target */

.mote{ position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,232,180,.55);
  filter:blur(.5px); z-index:3; pointer-events:none; animation:mote 8s ease-in-out infinite; }
@keyframes mote{ 0%{ transform:translate(0,0); opacity:0; } 15%{ opacity:.7; } 80%{ opacity:.4; } 100%{ transform:translate(-16px,-46px); opacity:0; } }

.sprayer{ position:absolute; width:15%; z-index:11; opacity:0; pointer-events:none; transform-origin:80% 50%; }
.sprayer svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.sprayer.go{ animation:sprayer .55s ease; }
@keyframes sprayer{
  0%{ opacity:0; transform:translate(45%,-22%) rotate(-38deg) scale(.6); }
  30%{ opacity:1; transform:translate(0,0) rotate(-12deg) scale(1); }
  68%{ transform:translate(0,0) rotate(-20deg) scale(1); }
  100%{ opacity:0; transform:translate(12%,2%) rotate(-12deg) scale(.95); }
}

@media (max-width:380px){
  .logo{ font-size:1.55rem; }
  .stat .val{ font-size:1.1rem; }
  .status{ font-size:.78rem; padding:5px 12px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; }
  .status.state-peek{ animation:none; }
}