/* style.css — the design room. Deliberately calm: no scoreboard, no clock,
   nothing flashing. The room is the biggest thing on the screen and the
   drawer of things sits underneath where a thumb can reach it. */
:root { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; user-select: none;
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #3b2f3f; background: #f7eef3;
}
body { display: flex; flex-direction: column; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#loading {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: #c98fb0; color: #fff; font-size: 20px; font-weight: 800;
}
#loading[hidden] { display: none; }

#top {
  /* Four buttons will not sit on one phone-width line, and two of them were
     simply falling off the right-hand edge. Let it wrap onto a second row. */
  flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  background: #c98fb0; color: #fff;
}
.title { font-weight: 800; font-size: clamp(15px, 4vw, 20px); margin-right: auto; }
#top button {
  background: rgba(255,255,255,.22); border-radius: 999px; padding: 7px 12px;
  font-size: clamp(11px, 2.8vw, 14px); font-weight: 800; white-space: nowrap;
}
@media (max-width: 560px) {
  .title { width: 100%; margin-right: 0; }
  #top button { flex: 1 1 auto; text-align: center; padding: 8px 6px; }
}
#top button:active { transform: translateY(2px); }

#stage { position: relative; flex: 1; min-height: 0; padding: 10px; }
#room {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border: 5px solid #b07a95; border-radius: 14px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.12);
}
#wall { position: absolute; inset: 0 0 34% 0; }
#floor { position: absolute; inset: 66% 0 0 0; box-shadow: inset 0 8px 14px rgba(0,0,0,.18); }

.item {
  position: absolute; line-height: 1; padding: 0; touch-action: none; cursor: grab;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.28));
}
.item.sel { outline: 3px dashed #fff; outline-offset: 5px; border-radius: 8px; }
.darkroom .item.sel { outline-color: #ffe08a; }

#tools {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; z-index: 200;
  background: rgba(30,24,34,.86); border-radius: 999px; padding: 6px 10px;
}
#tools[hidden] { display: none; }
#selname { color: #fff; font-size: 12px; font-weight: 800; opacity: .8; margin-right: 4px; white-space: nowrap; }
#tools button {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.16);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
}
#tools button:active { transform: scale(.92); }

#drawer {
  flex: none; max-height: 42vh; overflow-y: auto;
  background: #fff; border-top: 4px solid #e6cdd9;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}
.swline { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.swlabel { flex: none; width: 44px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: .5; }
.sws { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.sw {
  flex: none; width: 38px; height: 30px; border-radius: 8px;
  border: 3px solid #e6cdd9; box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.sw.on { border-color: #c98fb0; box-shadow: 0 0 0 3px rgba(201,143,176,.35); }

.pgroup { margin-top: 7px; }
.plabel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: .5; margin-bottom: 3px; }
.prow { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; }
.pitem {
  touch-action: pan-x;              /* let a sideways swipe scroll the drawer */
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #fdf6f9; border: 3px solid #eedbe5; border-radius: 12px;
  padding: 5px 9px; min-width: 58px; box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.pitem:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.pic { font-size: clamp(20px, 5.5vw, 27px); line-height: 1.1; }
.pnm { font-size: 9.5px; font-weight: 700; opacity: .6; white-space: nowrap; }

/* “Just the room” — everything but the room gets out of the way. The way
   back has to stay put: hiding every button hid the one that undoes this,
   and the only way out was reloading the page. */
body.photo #drawer, body.photo #tools, body.photo #btn-clear { display: none; }
body.photo #btn-photo { background: rgba(0,0,0,.16); color: #3b2f3f; opacity: .55; }
body.photo #btn-photo:hover { opacity: 1; }
body.photo #stage { padding: 0; }
body.photo #room { border-radius: 0; border-width: 0; }
body.photo #top { background: transparent; color: #3b2f3f; }

/* ------------------------------------------------------ living in it ----- */
#moods {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 12px; background: #f3dfe9; border-bottom: 3px solid #e6cdd9;
}
#moodword { font-weight: 800; font-size: clamp(12px, 3.2vw, 15px); margin-right: auto; white-space: nowrap; }
.mood { display: flex; align-items: center; gap: 5px; }
.mood i { font-style: normal; font-size: 15px; }
.mbar { display: block; width: clamp(46px, 13vw, 90px); height: 10px; background: #e0c4d3; border-radius: 999px; overflow: hidden; }
.mbar b { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .45s ease; }
#m-fun { background: linear-gradient(90deg,#f0a03c,#f5c451); }
#m-rest { background: linear-gradient(90deg,#6fb3d6,#8fd3e8); }
#m-mates { background: linear-gradient(90deg,#d1608f,#e88fb0); }
.mood em { font-style: normal; font-size: 10.5px; font-weight: 800; opacity: .55; min-width: 2ch; }

#me {
  position: absolute; left: 50%; top: 84%; transform: translate(-50%,-50%);
  font-size: clamp(34px, 9vw, 52px); line-height: 1; z-index: 300;
  transition: left .5s ease-in-out, top .5s ease-in-out;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.32)); pointer-events: none;
}
#me.walking { animation: bobwalk .26s ease-in-out infinite; }
@keyframes bobwalk { 0%,100%{ margin-top:0 } 50%{ margin-top:-5px } }
#me.busy { animation: doingit .7s ease-in-out infinite; }
@keyframes doingit { 0%,100%{ transform:translate(-50%,-50%) rotate(-3deg) } 50%{ transform:translate(-50%,-50%) rotate(3deg) } }
#mebubble {
  position: absolute; left: 50%; bottom: 104%; transform: translate(-50%,6px) scale(.7); opacity: 0;
  background: #fff; border: 3px solid #e6cdd9; border-radius: 999px;
  padding: 4px 12px; font-size: clamp(11px, 2.9vw, 14px); font-weight: 800;
  white-space: nowrap; transition: .18s; color: #3b2f3f;
}
#mebubble.on { opacity: 1; transform: translate(-50%,0) scale(1); }
.friend {
  position: absolute; transform: translate(-50%,-50%); font-size: clamp(30px, 8vw, 46px);
  z-index: 299; transition: left .5s ease-in-out, top .5s ease-in-out;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); pointer-events: none;
}
#roomsay {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 320;
  background: rgba(30,24,34,.86); color: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: clamp(11.5px, 3vw, 14px); font-weight: 800;
  white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis;
}
#roomsay[hidden] { display: none; }
.item.inuse { animation: inuse .7s ease-in-out infinite; }
@keyframes inuse { 0%,100%{ filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)) } 50%{ filter: drop-shadow(0 0 12px rgba(255,220,120,.95)) } }

/* the drawer of things is only out when you are moving things about */
#drawer, #tools { display: none; }
body.decorating #drawer { display: block; }
body.decorating #tools:not([hidden]) { display: flex; }
body.decorating #me, body.decorating .friend { opacity: .35; }
body.decorating #btn-friend { display: none; }
body.photo #moods { display: none; }

/* ------------------------------------------------- choosing where it goes -- */
.pitem.holding {
  border-color: #c98fb0; background: #fbe8f1;
  box-shadow: 0 0 0 3px rgba(201,143,176,.4); transform: translateY(-2px);
}
.carrying {
  position: fixed; z-index: 800; transform: translate(-50%,-50%);
  font-size: 54px; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
body.placing #room { outline: 4px dashed #c98fb0; outline-offset: -6px; cursor: copy; }
#placehint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 320;
  background: #c98fb0; color: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: clamp(11.5px, 3vw, 14px); font-weight: 800; white-space: nowrap;
}
#placehint[hidden] { display: none; }