* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, #fff6fb, #f1f9ff);
  color: #222;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  backdrop-filter: blur(8px);
}
.status { display: flex; gap: 12px; align-items: center; }
.status #recStatus { font-weight: 600; }
.status .hint { color: #888; font-size: 14px; }
.controls button {
  appearance: none; border: none; padding: 10px 14px; border-radius: 10px;
  background: #ffb6d7; color: #222; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 #e08bb3;
}
.controls button:active { transform: translateY(1px); box-shadow: 0 3px 0 #e08bb3; }

.stage {
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 40px);
  padding: clamp(12px, 3vh, 24px);
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.video-player {
  width: min(90vw, 600px);
  max-height: 50vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  background: #000;
}

.items-below {
  display: flex;
  gap: clamp(40px, 6vw, 80px);
  justify-content: center;
  padding: 0 16px;
}

.item {
  display: grid;
  place-items: center;
  font-size: clamp(48px, 8vw, 100px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.1));
  transition: transform .25s ease, filter .25s ease;
  cursor: pointer;
}
.item.grabbed {
  animation: shake .5s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1.15) saturate(1.2);
}
.item.highlight { box-shadow: 0 0 0 10px rgba(255, 199, 140, .35); border-radius: 24px; }

@keyframes shake {
  0%,100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(2px, -1px, 0) rotate(-1deg); }
  50% { transform: translate3d(-2px, 2px, 0) rotate(1deg); }
  75% { transform: translate3d(1px, 0, 0) rotate(-1deg); }
}

.cat-area {
  position: relative; display: grid; place-items: center;
  margin-top: 20px;
}
.cat {
  width: min(80vw, 420px);
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: transform .35s ease;
}
.cat.praise {
  animation: praise-bounce 1.6s ease;
}
@keyframes praise-bounce {
  0% { transform: scale(1); }
  20% { transform: scale(1.15); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.paw {
  position: absolute;
  width: clamp(60px, 12vw, 120px);
  height: clamp(60px, 12vw, 120px);
  display: grid;
  place-items: center;
  font-size: clamp(36px, 8vw, 72px);
  transform-origin: center;
  transform: translate(-50%, -10%) scale(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.paw.show { transform: translate(-50%, -10%) scale(1); }
.paw.left { left: -20%; top: 50%; rotate: -20deg; }
.paw.right { left: 120%; top: 50%; rotate: 20deg; }
.paw.center { left: 50%; top: 55%; }

/* When grabbing, the paw moves towards target side using classes */
.paw.grab-left { left: -5%; top: 50%; transform: translate(-50%, -10%) scale(1.05); }
.paw.grab-right { left: 105%; top: 50%; transform: translate(-50%, -10%) scale(1.05); }

.transcript { text-align: center; padding: 10px 16px; }
.transcript .label { color: #666; font-size: 14px; }
.transcript .text { font-size: 16px; min-height: 24px; }

.tips { text-align: center; color: #7a7a7a; font-size: 14px; padding-bottom: 12px; }

@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr minmax(200px, 1.2fr) 1fr; }
}