html {
  -webkit-touch-callout: none;
}

img,
.character-portrait {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.visual-protection-notice {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  border: 1px solid #c19a62;
  border-radius: 8px;
  background: #45281f;
  color: #f6e7c8;
  box-shadow: 0 8px 32px #21130e66;
  font-size: 18px;
  line-height: 1.4;
}
.visual-protection-notice[hidden] { display: none; }
.visual-protection-notice p { margin: 0; color: inherit; }
.visual-protection-notice .pebroc-icon {
  font-size: 28px;
  font-style: normal;
  color: #dfb979;
}
.visual-protection-notice button {
  flex: 0 0 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 4px;
  border: 1px solid #b18a5c;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.visual-protection-notice button:focus-visible {
  outline: 2px solid #f6e7c8;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .visual-protection-notice { gap: 10px; padding: 12px; font-size: 16px; }
}