.teacher-view { display: none !important; }

.desk-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.item-notebook {
  position: absolute;
  width: 140px;
  height: 190px;
  border-radius: 6px;
  background: #f7f5ef;
  border: 2px solid #244f42;
  box-shadow: 0 10px 22px rgba(36, 79, 66, .18);
}
.item-notebook::before {
  content: "";
  position: absolute;
  left: 12px; top: 0; bottom: 0;
  width: 3px;
  background: #d9a441;
}
.item-notebook::after {
  content: "";
  position: absolute;
  left: 26px; right: 14px; top: 28px;
  height: 80px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(36,79,66,.22) 0 1px,
    transparent 1px 12px
  );
}
.item-notebook.left  { left: 6%;  top: 18%; transform: rotate(-8deg); }
.item-notebook.right { right: 6%; top: 26%; transform: rotate(6deg);  }

.item-pencil {
  position: absolute;
  right: 18%;
  bottom: 18%;
  width: 8px;
  height: 150px;
  background: linear-gradient(#d9a441, #b8822c);
  border-radius: 4px;
  transform: rotate(22deg);
  box-shadow: 0 6px 14px rgba(36,79,66,.2);
}
.item-pencil::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 12px solid #8a5a1f;
}
.pixel-bubble {
  position: absolute;
  z-index: 20;
  padding: 8px 14px;
  background: #fffdf5;
  color: #244f42;
  font: 500 12px/1.4 "Noto Sans SC", sans-serif;
  border: 2px solid #244f42;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 3px 4px 0 rgba(36, 79, 66, .18);
  pointer-events: none;
  opacity: 0;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) translateY(6px);
  animation:
    bubbleIn .6s ease-out .4s forwards,
    bubbleFloat 2.4s ease-in-out 1.2s infinite;
}

/* 气泡下方的小尾巴 */
.pixel-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #244f42;
}

@keyframes bubbleIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}