/* home.css — Main view container, Home screen (hero, shapes, daily reward card) */

/* ---------------- MAIN VIEWS ---------------- */
main {
  flex: 1;
  position: relative;
  background-color: var(--card-bg);
  overflow-y: auto;
  width: 100%;
}

.view-section {
  display: none;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.view-section.active {
  display: flex;
  flex-direction: column;
}

/* --- HOME SCREEN --- */
#view-home {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: radial-gradient(1100px 600px at 50% 25%, var(--bg-glow) 0%, var(--bg-edge) 70%);
}

/* --- MARKETPLACE SCREEN (same shapes background as Home, no logo/reward) --- */
#view-marketplace {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background: radial-gradient(1100px 600px at 50% 15%, var(--bg-glow) 0%, var(--bg-edge) 70%);
}
#view-marketplace .market-content {
  position: relative;
  z-index: 2;
}
/* Push the shared shapes toward the edges here so they don't collide with market cards */
#view-marketplace .square-green { top: 4%; right: 3%; opacity: 0.45; transform: rotate(45deg) scale(0.8); }
#view-marketplace .pentagon-orange { display: none; }
#view-marketplace .triangle-red { top: 68%; left: 3%; opacity: 0.4; transform: scale(0.7); }
#view-marketplace .triangle-red-right { bottom: 4%; right: 5%; opacity: 0.4; transform: rotate(25deg) scale(0.8); }
#view-marketplace .circle-blue { bottom: 6%; left: 45%; opacity: 0.35; transform: scale(0.7); }

.hero-title {
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.diagonal-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}

.diagonal-logo .app {
  font-size: 10.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff3b5c;
  text-shadow: 0 0 25px rgba(255, 59, 92, 0.25);
  transform: translate(-65px, -4px);
  line-height: 0.85;
}

.diagonal-logo .ssule {
  font-size: 10.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  transform: translate(42px, 4px);
  line-height: 0.85;
}
.diagonal-logo .ssule .s-letter {
  color: #0088ff;
  text-shadow: 0 0 25px rgba(0, 136, 255, 0.25);
}
.diagonal-logo .ssule .sule-letters {
  color: var(--text-main);
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 2.8rem;
  margin-top: 10px;
}

.shape {
  position: absolute;
  animation: float 6s ease-in-out infinite alternate;
}

.square-green {
  width: 140px; height: 140px; background: var(--neon-green); top: 10%; right: 12%; transform: rotate(45deg); border-radius: 16px;
  filter: drop-shadow(0 0 22px rgba(16, 185, 129, 0.65));
}
.pentagon-orange {
  width: 100px; height: 100px; top: 25%; left: 10%; animation-delay: -2s;
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.6));
}
.pentagon-orange::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--neon-orange);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* The triangles are ALWAYS 90px wide x 75px tall. The face (eyes/mouth/z/brows) is positioned in px against
   that size, so to make the triangles smaller on phones / mini windows we shrink the WHOLE element with
   --tri-scale (set in responsive-phone.css and mini-windows.css). The face scales with it, so it can never
   drift out of the triangle. `translate` keeps the top-left corner in the same place as an un-scaled box. */
.triangle-red, .triangle-red-right {
  --tri-scale: 1;
  scale: var(--tri-scale);
  translate: calc(45px * (var(--tri-scale) - 1)) calc(37.5px * (var(--tri-scale) - 1));
}
.triangle-red {
  width: 0; height: 0; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 75px solid var(--neon-red); top: 12%; left: 28%; animation-delay: -1s;
  filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6));
}
.triangle-red-right {
  width: 0; height: 0; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 75px solid var(--neon-red); bottom: 18%; right: 12%; transform: rotate(25deg); animation-delay: -3s;
  filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6));
}
.circle-blue {
  width: 90px; height: 90px; background: var(--neon-blue); border-radius: 50%; bottom: 16%; left: 28%; animation-delay: -4s;
  filter: drop-shadow(0 0 18px rgba(0, 136, 255, 0.6));
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  /* Divided by --tri-scale (only the triangles define it) so a shrunken triangle still bobs the same
     20px on screen instead of 20px * scale. Other shapes have no --tri-scale, so they use 1. */
  100% { transform: translateY(calc(-20px / var(--tri-scale, 1))) rotate(10deg); }
}

/* Easter egg (see js/header-menus.js, wakeHomeTriangles): click the profile
   button 20 times in a row (switching screens resets the count — see
   js/navigation.js). Plays once per trigger — not infinite — but `forwards`
   freezes each animation on its final (awake) frame instead of letting it
   revert to the unanimated base styles, so the triangles stay awake for
   good once woken, rather than settling back to blank.
   Sequence: blank triangle -> sleepy face fades in (closed eyes + "z") ->
   eyes open -> settles into a permanent awake, slightly-smiling look. */
.triangle-red.waking, .triangle-red-right.waking {
  animation: wake-up 3s ease-in-out forwards;
}
@keyframes wake-up {
  0%   { transform: scale(1) rotate(0deg) translateY(0); filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6)); }
  8%   { transform: scale(0.9, 1.1) rotate(-6deg) translateY(0); }
  16%  { transform: scale(1.08, 0.92) rotate(6deg) translateY(0); }
  24%  { transform: scale(0.94, 1.06) rotate(-4deg) translateY(0); filter: drop-shadow(0 0 30px rgba(255, 59, 92, 0.85)); }
  32%  { transform: scale(1.05) rotate(4deg) translateY(-2px); }
  45%  { transform: scale(1.12) rotate(-3deg) translateY(-10px); filter: drop-shadow(0 0 42px rgba(255, 59, 92, 1)); }
  60%  { transform: scale(1.1) rotate(3deg) translateY(-14px); filter: drop-shadow(0 0 46px rgba(255, 59, 92, 1)); }
  75%  { transform: scale(1.04) rotate(-1deg) translateY(-4px); }
  100% { transform: scale(1) rotate(0deg) translateY(0); filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6)); }
}

/* Face: two dot eyes + a dot mouth, positioned by eye/hand-measured offsets
   against the triangle's border-trick geometry (the element itself is a 0x0
   box sitting at the triangle's top point — border-bottom is what makes it
   visually 75px tall/90px wide, so these offsets land the dots in the lower,
   wider part of the triangle). Invisible/blank by default — "dotted" look is
   just small flat circles, no detailed emoji art. */
.face-eye, .face-mouth, .face-zzz { position: absolute; opacity: 0; pointer-events: none; }
.face-eye {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(20, 0, 5, 0.75);
  top: 46px;
  transform: scaleY(0);
}
.face-eye-l { left: -11px; }
.face-eye-r { left: 4px; }
.face-mouth {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(20, 0, 5, 0.6);
  top: 59px; left: -3px;
}
.face-zzz {
  top: -16px; left: 14px;
  font-size: 11px; font-weight: 700; font-family: sans-serif; line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.triangle-red.waking .face-eye, .triangle-red-right.waking .face-eye {
  animation: eyes-open-sequence 3s ease-in-out forwards;
}
.triangle-red.waking .face-mouth, .triangle-red-right.waking .face-mouth {
  animation: mouth-fade 3s ease-in-out forwards;
}
.triangle-red.waking .face-zzz, .triangle-red-right.waking .face-zzz {
  animation: zzz-fade 3s ease-in-out forwards;
}

/* Closed (squashed flat) -> briefly held asleep -> opens into a full dot ->
   stays open for good (`forwards` on the rule above freezes this last frame). */
@keyframes eyes-open-sequence {
  0%   { opacity: 0; transform: scaleY(0); }
  10%  { opacity: 1; transform: scaleY(0.15); }
  40%  { opacity: 1; transform: scaleY(0.15); }
  55%  { transform: scaleY(0.6); }
  70%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(1); }
}
/* Mouth starts as the neutral sleepy dot, then morphs into a small upward
   curve (same "flat top, round bottom" trick as a basic smiley) right as
   the eyes finish opening, and stays smiling for good. */
@keyframes mouth-fade {
  0%   { opacity: 0; width: 6px; height: 6px; left: -3px; border-radius: 50%; }
  10%  { opacity: 1; width: 6px; height: 6px; left: -3px; border-radius: 50%; }
  40%  { opacity: 1; width: 6px; height: 6px; left: -3px; border-radius: 50%; }
  65%  { opacity: 1; width: 9px; height: 5px; left: -4.5px; border-radius: 0 0 50% 50%; }
  100% { opacity: 1; width: 9px; height: 5px; left: -4.5px; border-radius: 0 0 50% 50%; }
}
@keyframes zzz-fade {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 1; transform: translateY(-2px); }
  45%  { opacity: 1; transform: translateY(-4px); }
  58%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}

/* Final resting state. JS (header-menus.js) swaps .waking -> .awake once the wake-up animation
   has played, so coming back to Home (display:none -> flex restarts CSS animations) doesn't
   replay it. Same look the animation ends on: open dot eyes, small smile, no z. */
.triangle-red.awake .face-eye, .triangle-red-right.awake .face-eye { opacity: 1; transform: scaleY(1); }
.triangle-red.awake .face-mouth, .triangle-red-right.awake .face-mouth {
  opacity: 1; width: 9px; height: 5px; left: -4.5px; border-radius: 0 0 50% 50%;
}

/* Stage 3 — SHOCKED (see js/header-menus.js, shockHomeTriangles). Same triangle, same
   face spots; a "!" pops up over the tip, eyes become tall black ovals under raised brows, and
   the mouth becomes a big "o". Stage 4 — ANGRY: the "!" is removed, brows slant down toward the
   nose, eyes narrow, mouth becomes a frown, and the glow burns hotter. --px/--py (eyes) and
   --mx/--my (mouth) are set from JS so they follow the cursor in both stages. They use the
   separate `translate`/`rotate` properties so they never fight the waking animation's `transform`. */
.face-brow {
  position: absolute; opacity: 0; pointer-events: none;
  top: 36px; width: 9px; height: 2.5px; border-radius: 2px;
  background: rgba(20, 0, 5, 0.9);
}
.triangle-red.shocking, .triangle-red-right.shocking {
  animation: shock-jolt 0.5s ease-out forwards;
}
@keyframes shock-jolt {
  0%   { transform: scale(1) rotate(0deg) translateY(0); filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6)); }
  15%  { transform: scale(1.18, 0.88) rotate(0deg) translateY(2px); }
  35%  { transform: scale(0.92, 1.16) rotate(-3deg) translateY(-12px); filter: drop-shadow(0 0 40px rgba(255, 59, 92, 1)); }
  55%  { transform: scale(1.04) rotate(3deg) translateY(-4px); }
  75%  { transform: scale(1) rotate(-1deg) translateY(0); }
  100% { transform: scale(1) rotate(0deg) translateY(0); filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6)); }
}
.triangle-red.angering, .triangle-red-right.angering {
  animation: anger-shake 0.7s linear forwards;
}
@keyframes anger-shake {
  0%   { transform: scale(1) translateX(0); filter: drop-shadow(0 0 18px rgba(255, 59, 92, 0.6)); }
  10%  { transform: scale(1.12) translateX(-3px) rotate(-2deg); filter: drop-shadow(0 0 42px rgba(255, 30, 60, 1)); }
  20%  { transform: scale(1.12) translateX(3px) rotate(2deg); }
  30%  { transform: scale(1.1) translateX(-3px) rotate(-2deg); }
  40%  { transform: scale(1.1) translateX(3px) rotate(2deg); }
  50%  { transform: scale(1.08) translateX(-2px) rotate(-1deg); }
  60%  { transform: scale(1.06) translateX(2px) rotate(1deg); }
  80%  { transform: scale(1.02) translateX(0) rotate(0deg); }
  100% { transform: scale(1) translateX(0) rotate(0deg); filter: drop-shadow(0 0 26px rgba(255, 30, 60, 0.95)); }
}
.triangle-red.angry, .triangle-red-right.angry { filter: drop-shadow(0 0 26px rgba(255, 30, 60, 0.95)); }
.triangle-red.awake.shocked .face-eye,
.triangle-red-right.awake.shocked .face-eye { animation: none; opacity: 1; transform: none; width: 7px; height: 9px; top: 44px; background: rgba(20, 0, 5, 0.85); translate: var(--px, 0px) var(--py, 0px); }
.triangle-red.awake.shocked .face-eye-l,
.triangle-red-right.awake.shocked .face-eye-l { left: -11px; }
.triangle-red.awake.shocked .face-eye-r,
.triangle-red-right.awake.shocked .face-eye-r { left: 4px; }
.triangle-red.awake.shocked .face-brow,
.triangle-red-right.awake.shocked .face-brow { opacity: 1; top: 37px; width: 8px; height: 2px; }
.triangle-red.awake.shocked .face-brow-l,
.triangle-red-right.awake.shocked .face-brow-l { left: -12px; rotate: -10deg; }
.triangle-red.awake.shocked .face-brow-r,
.triangle-red-right.awake.shocked .face-brow-r { left: 4px; rotate: 10deg; }
.triangle-red.awake.shocked .face-mouth,
.triangle-red-right.awake.shocked .face-mouth { animation: none; opacity: 1; width: 6px; height: 8px; left: -3px; top: 58px; border-radius: 50%; background: rgba(20, 0, 5, 0.85); translate: var(--mx, 0px) var(--my, 0px); }
.triangle-red.awake.shocked .face-zzz,
.triangle-red-right.awake.shocked .face-zzz { animation: none; opacity: 0; }
.triangle-red.awake.angry .face-eye,
.triangle-red-right.awake.angry .face-eye { animation: none; opacity: 1; transform: none; width: 7px; height: 6px; top: 47px; border-radius: 50% 50% 40% 40%; background: rgba(20, 0, 5, 0.9); translate: var(--px, 0px) var(--py, 0px); }
.triangle-red.awake.angry .face-eye-l,
.triangle-red-right.awake.angry .face-eye-l { left: -11px; }
.triangle-red.awake.angry .face-eye-r,
.triangle-red-right.awake.angry .face-eye-r { left: 4px; }
.triangle-red.awake.angry .face-brow,
.triangle-red-right.awake.angry .face-brow { opacity: 1; top: 42px; width: 9px; height: 2.5px; }
.triangle-red.awake.angry .face-brow-l,
.triangle-red-right.awake.angry .face-brow-l { left: -12px; rotate: 24deg; }
.triangle-red.awake.angry .face-brow-r,
.triangle-red-right.awake.angry .face-brow-r { left: 3px; rotate: -24deg; }
.triangle-red.awake.angry .face-mouth,
.triangle-red-right.awake.angry .face-mouth { animation: none; opacity: 1; width: 9px; height: 4.5px; left: -4.5px; top: 60px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: rgba(20, 0, 5, 0.85); translate: var(--mx, 0px) var(--my, 0px); }
.triangle-red.awake.angry .face-zzz,
.triangle-red-right.awake.angry .face-zzz { animation: none; opacity: 0; }
.face-bang {
  position: absolute; left: -6px; top: -44px;
  font: 900 34px/1 sans-serif; color: #fff;
  text-shadow: 0 0 10px rgba(255, 59, 92, 0.95), 0 0 22px rgba(255, 59, 92, 0.7);
  pointer-events: none;
  animation: bang-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes bang-pop {
  0%   { opacity: 0; scale: 0.2; translate: 0 14px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shocking, .angering, .face-bang { animation: none !important; }
}

/* Stage 5 — RAGE (see js/header-menus.js, rageHomeTriangles). Even angrier face: steeper brows,
   squintier eyes, hotter red, bigger glow. JS moves the triangle with the `translate`/`rotate`
   properties inside a fixed overlay, so the float animation is switched off. */
.triangle-red.rampage, .triangle-red-right.rampage,
.triangle-red.rampage-ghost {
  position: fixed; top: 0; left: 0; right: auto; bottom: auto; margin: 0;
  animation: none !important; transform: none !important;
  z-index: 9990; pointer-events: none;
}
.triangle-red.rampage, .triangle-red-right.rampage {
  border-bottom-color: #ff1636;
  filter: drop-shadow(0 0 30px rgba(255, 22, 54, 1));
}
.triangle-red.awake.angry.rampage .face-brow, .triangle-red-right.awake.angry.rampage .face-brow { top: 41px; height: 3px; }
.triangle-red.awake.angry.rampage .face-brow-l, .triangle-red-right.awake.angry.rampage .face-brow-l { rotate: 34deg; }
.triangle-red.awake.angry.rampage .face-brow-r, .triangle-red-right.awake.angry.rampage .face-brow-r { rotate: -34deg; }
.triangle-red.awake.angry.rampage .face-eye, .triangle-red-right.awake.angry.rampage .face-eye { height: 5px; top: 48px; }
.triangle-red.awake.angry.rampage .face-mouth, .triangle-red-right.awake.angry.rampage .face-mouth { width: 11px; height: 5px; left: -5.5px; }
.triangle-red.rampage-ghost {
  z-index: 9985; opacity: 0.55;
  animation: ghost-fade 0.65s ease-out forwards !important;
}
@keyframes ghost-fade {
  0%   { opacity: 0.55; scale: 1; }
  100% { opacity: 0;    scale: 0.55; }
}
.rage-cursor, .rage-cursor * { cursor: none !important; }
.fake-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.rage-shield {
  position: fixed; top: 0; left: 0; width: 90px; height: 75px; z-index: 9992;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);   /* only the triangle itself blocks clicks */
  pointer-events: auto; touch-action: none; background: transparent;
}
.bump-ring {
  position: fixed; z-index: 9995; width: 0; height: 0; pointer-events: none;
  animation: bump-ring 0.45s ease-out forwards;
}
.bump-ring::before {
  content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px;
  border-radius: 50%; border: 3px solid #ff1636; box-shadow: 0 0 14px rgba(255, 22, 54, 0.9);
}
.bump-ring span {
  position: absolute; left: 0; top: -34px; transform: translateX(-50%);
  font: 900 13px/1 sans-serif; letter-spacing: 1px; color: #fff; white-space: nowrap;
  text-shadow: 0 0 6px #ff1636, 0 0 12px #ff1636;
}
@keyframes bump-ring {
  0%   { opacity: 1; scale: 0.4; }
  100% { opacity: 0; scale: 1.9; }
}

.daily-reward-card {
  position: absolute;
  bottom: 30px; right: 30px;
  background: linear-gradient(135deg, #ffe066 0%, #ff9100 100%);
  padding: 15px 25px;
  border-radius: 20px;
  color: #3d2000;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 20px rgba(255, 145, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s;
  z-index: 10;
}

.daily-reward-card:hover { transform: scale(1.05); }
.daily-reward-card.on-cooldown {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.daily-reward-card.on-cooldown:hover { transform: none; }

/* ---- Rage escalation: fury pulse (js/header-menus.js, rageFuryPulse) ---- */
/* Each Profile click once already in rage gives both triangles a quick, sharper flash/shake, scaling
   with how close the blackout is (--rage-fury, 0..1). */
.triangle-red.fury-pulse, .triangle-red-right.fury-pulse {
  animation: fury-pulse 0.3s ease-out;
}
@keyframes fury-pulse {
  0% { filter: drop-shadow(0 0 calc(18px + 40px * var(--rage-fury, 0)) rgba(255, 20, 20, 0.95)) brightness(1.6); }
  100% { filter: drop-shadow(0 0 26px rgba(255, 30, 60, 0.95)) brightness(1); }
}

/* ---- Stage 6: BLACKOUT (js/header-menus.js, triggerRageBlackout) ---- */
/* The page goes black. One big red triangle floats there with still, unblinking "dead" eyes
   staring straight out. A few seconds in, its face morphs into a sad one (sad brows, smaller eyes,
   a frown) and stays that way. Permanent by design — nothing here closes it. */
#rageBlackout {
  position: fixed; inset: 0; z-index: 10060;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.blackout-tri {
  position: relative;
  width: 0; height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 190px solid #ff1636;
  filter: drop-shadow(0 0 50px rgba(255, 22, 54, 0.85));
  animation: blackout-float 3.2s ease-in-out infinite;
}
/* Same plain-black-dot face family as the home triangles (.face-eye/.face-mouth, above) — solid
   near-black circles, no white sclera, no separate pupil — just bigger, to match this triangle's size. */
.blackout-tri .bo-eye, .blackout-tri .bo-brow, .blackout-tri .bo-mouth {
  position: absolute;
  background: rgba(20, 0, 5, 0.9);
  transition: all 0.9s ease;   /* the dead-stare -> sad swap morphs smoothly, not an instant cut */
}
/* Dead stare: plain round eyes, wide open, and a small round "o" mouth — no blink, no following
   the cursor, nothing moves until the sad swap. */
.blackout-tri .bo-eye { top: 108px; width: 18px; height: 18px; border-radius: 50%; }
.blackout-tri .bo-eye-l { left: -44px; }
.blackout-tri .bo-eye-r { left: 26px; }
.blackout-tri .bo-brow { top: 90px; width: 22px; height: 4px; border-radius: 2px; opacity: 0; }
.blackout-tri .bo-brow-l { left: -46px; }
.blackout-tri .bo-brow-r { left: 24px; }
.blackout-tri .bo-mouth { top: 150px; left: -10px; width: 20px; height: 20px; border-radius: 50%; }

/* The sad face (js/header-menus.js adds .bo-sad on the overlay ~4s after the blackout starts):
   same round dot eyes and mouth, just squashed/angled into a sad shape — same family as the home
   triangles' angry mouth (a downward curve made with a lopsided border-radius). */
.bo-sad .blackout-tri .bo-eye { height: 10px; top: 112px; }
.bo-sad .blackout-tri .bo-brow { opacity: 1; }
.bo-sad .blackout-tri .bo-brow-l { rotate: -18deg; }
.bo-sad .blackout-tri .bo-brow-r { rotate: 18deg; }
.bo-sad .blackout-tri .bo-mouth {
  width: 34px; height: 13px; left: -17px; top: 152px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;   /* a downward-curving frown, not a round "o" */
}
@keyframes blackout-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}
@media (prefers-reduced-motion: reduce) {
  .blackout-tri { animation: none; }
  .blackout-tri .bo-eye, .blackout-tri .bo-brow, .blackout-tri .bo-mouth { transition: none; }
}