/* Lightweight stage overlays; the scenery stays available to explore. */
.scene .instruction {
  position:absolute;
  z-index:7;
  inset:auto 4% 3%;
  min-height:0;
  padding:clamp(8px,2.7vw,12px) clamp(10px,3vw,16px);
  border:1px solid #fff0cb;
  border-radius:clamp(13px,4vw,21px);
  background:linear-gradient(135deg,#fff9edfa,#ffe7cef7);
  box-shadow:0 4px 0 #6e43534d,0 8px 22px #27172f47;
  color:#4d3447;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 9px;
  align-items:center;
  line-height:1.2;
  pointer-events:none;
}
.scene .instruction [data-stage] {
  grid-column:2;
  color:#754853;
  font-size:clamp(10px,2.85vw,13px);
  font-weight:750;
}
.scene .instruction [data-hint] {
  grid-column:2;
  display:block;
  font-size:clamp(12px,3.55vw,16px);
  font-weight:650;
  text-wrap:pretty;
}
.scene .instruction .hint-kitsune {
  display:block;
  grid-row:1 / span 2;
  grid-column:1;
  width:clamp(30px,10vw,43px);
  height:clamp(30px,10vw,43px);
  object-fit:contain;
  border-radius:50%;
  background:#ffe0b9;
  padding:3px;
}
.scene .instruction button {
  grid-column:2;
  pointer-events:auto;
  margin-top:3px;
  min-height:33px;
}
.scene:not(.has-started) .instruction {display:none}
.scene #welcome {
  position:absolute;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  padding:6%;
  color:#4f3044;
  background:linear-gradient(180deg,#5032633d,#3c1b489d);
  overflow:auto;
}
.scene #welcome .welcome-card {
  position:relative;
  width:min(100%,330px);
  display:grid;
  justify-items:center;
  gap:clamp(7px,2vw,13px);
  padding:clamp(15px,5vw,24px);
  background:linear-gradient(145deg,#fff9eafc,#ffdfc8fb);
  border:2px solid #fff2cf;
  border-radius:clamp(17px,6vw,31px);
  box-shadow:0 5px 0 #93617c9c,0 12px 42px #38284190;
  text-align:center;
  animation:toyWelcomeIn .38s cubic-bezier(.21,.68,.42,1.12) both;
}
.scene #welcome :is(h1,h2,h3,p) {margin:0;text-wrap:balance}
.scene #welcome :is(h1,h2,h3) {font-size:clamp(22px,7vw,35px);line-height:1.05;color:#624258}
.scene #welcome p {font-size:clamp(13px,3.9vw,17px);line-height:1.3;font-weight:650;color:#634357}
.scene #welcome img {width:min(66%,190px);max-height:130px;object-fit:contain;filter:drop-shadow(0 7px 4px #794f533b)}
.scene #welcome [data-action=start] {
  min-height:46px;
  border:1px solid #b86d52;
  border-radius:999px;
  color:#5a302a;
  background:linear-gradient(#ffd994,#ffb67b);
  box-shadow:0 3px 0 #b16d5c;
  padding:8px clamp(20px,7vw,31px);
  font:inherit;
  font-size:clamp(16px,4.9vw,21px);
  font-weight:850;
  cursor:pointer;
  touch-action:manipulation;
}
.scene #welcome [data-action=start]:active {transform:translateY(2px);box-shadow:0 1px 0 #b16d5c}
@keyframes toyWelcomeIn {from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.scene #welcome .welcome-card{animation:none}}