/* index.avatar.css — public terminal site (index.html): red eyes (angry avatar). One of the index.*.css files, linked in order from index.html. */
/* Two layers, so it is never a question of which rule wins: "page" holds the normal stylesheet rules, "element" holds exact
   styles for single elements. Anything in "element" beats anything in "page", whatever the selectors look like. */
@layer page, element;

@layer page {
/* ─────────────────────────────────────────
   RED EYES
   ───────────────────────────────────────── */
.profile-pic.angry {
  border-color: var(--danger) !important;
  box-shadow: 0 0 20px rgba(154, 60, 60, 0.3);
}

@keyframes screenShake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-3px, 2px); }
  20% { transform: translate(3px, -2px); }
  30% { transform: translate(-2px, -1px); }
  40% { transform: translate(2px, 1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, -1px); }
}

.screen-shake { animation: screenShake 0.5s ease; }
}